Category:computer | web | CSS
CSS
结构层 HTML 从语义的角度描述页面结构。
样式层 CSS 从审美的角度负责页面样式。
行为层 JavaScript 从交互的角度描述页面行为。
Overview
Definition
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 外部样式表通常存储在 CSS 文件中,可以极大提高工作效率
- 多个样式定义可层叠为一
- 是一门指定文档该如何呈现给用户的语言。
CSS 是开放网络的核心语言之一,由 W3C 规范 进行标准化。CSS 被分为不同等级:CSS1 现已废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块且正在标准化中。
将一篇文档 呈现 给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器,用于将文档以可视的形式进行呈现,如在计算机屏幕、投影仪或打印机上。
为什么使用 CSS
- 解决了 HTML 内容与表现分离的问题,以便能够:
- 避免重复
- 更容易维护
- 为不同的目的,使用不同的样式而内容相同
CSS 如何工作
浏览器在展现一个文档的时候,必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段:
- 浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。这时DOM 就代表了电脑内存中的相应文档,因为它已经融合了文档内容和相应的样式表。
- 最后浏览器把DOM的内容展示出来。
DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器,但是,它可以作为子结点的父类结点而存在。
层叠与继承
一个元素的样式,可以通过多种方式来定义,而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大,也导致CSS显得如此“混乱”而且难以调试。
对于层叠来说,共有三种主要的样式来源:
- 浏览器对HTML定义的默认样式。
- 用户定义的样式。
- 开发者定义的样式,可以有三种形式:
- 定义在外部文件(外链样式):本教程中案例主要是通过这种形式定义样式。
- 在页面的头部定义(内联样式):通过这种形式定义的样式只在本页面内生效。
- 定义在特定的元素身上(行内样式):这种形式多用于测试,可维护性较差。
用户定义的样式表会覆盖浏览器定义的默认样式,然后网页开发者定义的样式又会覆盖用户样式。在这个教程中,你作为网页的开发者只需要关注开发者样式。
再来看看优先级,从高到低依次为:网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。
对继承的元素来说,子元素自身的样式优先级高于从父级继承来的样式。
CSS 另外提供了一个!important关键字,用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。这就意味着,作为开发者,你很难准确的预知页面最终在用户电脑上的显示效果。
选择器
类选择器(Class selectors)
通过设置元素的 class 属性,可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。
在写样式表时,类选择器是以英文句号(.)开头的。
ID选择器(ID selectors)
通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。
在写样式表时,ID选择器是以#开头的。
伪类选择器(Pseudo-classes selectors)
CSS伪类(pseudo-class)是加在选择器后面的用来指定元素状态的关键字。比如,:hover 会在鼠标悬停在选中元素上时应用相应的样式。
伪类和伪元素(pseudo-elements)不仅可以让你为符合某种文档树结构的元素指定样式,还可以为符合某些外部条件的元素指定样式:浏览历史(比如是否访问过 (:visited), 内容状态(如 :checked ), 鼠标位置 (如:hover). 完整列表参见 CSS3 Selectors working spec.
伪类列表
基于关系的选择器
CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。
| 选择器 | 选择的元素 |
| A E | 元素A的任一后代元素E (后代节点指A的子节点,子节点的子节点,以此类推) |
| A > E | 元素A的任一子元素E(也就是直系后代) |
| E:first-child | 任一是其父母结点的第一个子节点的元素E |
| B + E | 元素B的任一下一个兄弟元素E |
| B ~ E | B元素后面的拥有共同父元素的兄弟元素E |
你可以任意组合以表达更复杂的关系。
你还可以使用星号(*)来表示”任意元素“。
选取器组
当很多元素具有相同的样式时,你就需要定义一个选择器组,组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。
在样式表的其他地方,你也可以单独对这些选择器重新设置样式,这些样式会应用到相应的选择器上。
可读性良好的 CSS
空白字符
空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。
对页面而言,空白字符也是页面的一个组成部分,它的效果就是创造了边距、分割,还有行和列间的空白。
如果你的样式表中一行只有一条规则,那这是使用空白字符最少的情况。但是,对于复杂的样式表而言,这可能不便于阅读,而且维护起来也比较困难。
样式表的书写风格可以根据你自己的喜好来选择。但是,如果你开发的项目需要分享给他人,那就很有必要来制定一些书写规范。
注释
CSS注释以/* 开始,以 */结束。
你可以在样式表中写些实际意义的注释,也可以是为了测试的目的而写的临时性的注释内容。
对于样式表中的注释内容一定要写在注释标签内,这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。
文本样式
颜色
内容
文本内容
图片内容
列表
如果你完成了上一节的挑战任务,你就知道如何在列表项前面插入内容。
CSS为列表提供了专门的属性。如果可以,使用这些属性通常会比较方便。
使用list-style 属性来指定列表项标记的样式。
你的CSS中的选择器可以选中列表项 (比如, <li>)。也可以选中列表项的父节点 (比如, <ul>)。此时列表项会继承父节点的样式。
无序列表
无序列表的每个列表项都用同样的方式标记。
CSS 有三种标记样式:
- disc
- circle
- square
你可以指定一个图片的URL来自定义标记样式。
有序列表
计数器
你可以用计数器来计数任何元素,不仅是列表元素。比如,在某些文档中你可能想计数标题和段落。
要想计数,你必须定义一个计数器。
在计数开始前的某个元素上,设置 counter-reset属性以重置计数器。被计数元素的父节点是一个不错的选择。当然,任何出现在被计数元素前面的元素都可以。
设置每个需要计数的元素的counter-increment 属性为你的计数器名。
通过为选择器增加 :before 或 :after 并设置 content 属性来显示计数器。 (如上一节所示, 内容).
在content属性的值中设置 counter(),在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 有序列表 中相同。
正常情况下,显示计数器的元素也会递增计数器。
盒模型
当你的浏览器展现一个元素时,这个元素会占据一定的空间。这个空间由四部分组成。
中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距,外边距将该元素与其它元素分开。
内边距,边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。
颜色
内边距总是跟元素的背景色一样,所以当你设置背景色时,你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。
边框
你可以用边线或者边框来装饰元素。
用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度(通常是以显示到屏幕上的像素为单位), 样式, 还有颜色。
你也可以通过设置样式为 none 或 hidden 来明确地移除边框,或者设置边框颜色为 transparent 来让边框不可见,后者不会改变布局。
如果一次只指定某一个方向的边框,就用属性: border-top, border-right, border-bottom, border-left。 你可以用这些属性指定某个方向上的边框,或者不同方向上的不同边框。
外边距和内边距
使用外边距和内边距调整元素的位置,并在其周围创建空间。
用 margin 属性或者 padding 属性分别设置外边距和内边距的宽度。
如果你指定一个宽度,它将会作用于元素四周(上、右、下、左)。
如果你指定两个宽度, 第一个宽度会作用于顶部和底部,第二个宽度作用于右边和左边。
你也可以按照顺序指定四个宽度: 上、右、下、左。
布局
你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。
当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题,并不在本文范畴。
本文主要介绍一些简单的布局方法。(高阶技术请参阅外部链接 学习高级布局)
文档结构
当你想控制文档布局时,就不得不改变它的结构。
页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 <div> 元素来创建结构。
大小单位
到目前为止,你可以通过像素来指定大小。这在有些情况下是非常合适的,比如电脑屏幕显示。 但当用户改变字体大小之后,你的布局可能会发生错位。
因此,最好通过百分比或 ems (em) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时,你的布局会自己修正。
文本布局
有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:
- text-align
- 内容对齐。 可以使用下面几个值: left, right, center, justify。
- text-indent
- 指定内容缩进。
这两个属性可以应用于任何文本类内容,不只是纯文本。 需要注意的是,它们会被元素的子元素继承, 所以需要在子元素中将它们关闭,以免出现意想不到的效果。
浮动
float 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。
你可以使用 clear 属性来避免其它元素受到浮动效果的影响。
位置
你可以为一个元素指定 position 属性为以下值之一,来设置其位置。
这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。
- relative
- 通过为元素指定一个值,元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
- fixed
- 为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动,元素位置仍然不变。
- absolute
- 为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
- static
- 默认值。当明确要关闭位置属性时使用。
和 position 属性(除了 static)一起使用的, 有下列属性: top, right, bottom, left, width, height 通过设置它们来指定元素的位置或大小。
表格
表格是一个矩形网格中的信息安排。一些表格相当复杂,不同的浏览器对复杂的表格将会有不同的展示结果。
当你设计你的文档时,使用一个表格来表示一系列信息的关系。因为信息的意义依然清晰,所以不同浏览器用稍微不同的方式来展示表格是没有关系的。
创建表格的时候,不要用一些非常规的方式构造特殊的可视化布局,本教程的前一页(布局)使用的技术可以更好的达成目的。
表格结构
在表格中,信息显示在一个个的单元格(cell)中.
在页面横向上一条直线的单元格构成了行(row)。
在一些表格中,行可能被分组。表格开始的特定的行组是表头 (header)。表格最后的特定行组是表尾(footer)。表格中主要的行就是表体(body),这些表体也可能被分组。
在页面纵向上一条直线的单元格构成了列(column),但是在CSS表格中,列的使用是受限的。
边框
单元格没有外边距。
但是单元格有边框和内边距。默认情况下,边框被表格的border-spacing属性值间隔。你也可以通过设置表格的border-collapse属性值为collapse来完全移除间隔。
标题
<caption>元素是用在整个表格的一个标签。默认下,它显示在表格的顶部。
可以设置<caption>的caption-side属性值为bottom来将标签移到表格的底部。
想要样式化caption的文本,可以使用任何常规的文本属性。
空单元格
你可以通过为表格元素指定empty-cells属性值show来显示空单元格(就是其边框和背景)。
你也可以指定empty-cells: hide;来隐藏边框和背景,那么如果一个单元格的父元素设置了背景,背景将通过空单元格显示出来。
媒体
CSS的作用是将网页文档以更友好的展现方式呈现给用户。
例如,假设你现在正用一台显示设备来阅读这篇文章,同时你也想把它投影到屏幕上,或者打印出来,而显示设备、屏幕投影和打印等这些媒介都有自己的特点,CSS就是为文档提供在不同媒介上展示的适配方法。
CSS通过使用@media 的格式来对特定的媒介指定适配规则。
一些常见的媒介类型:
| screen | 彩色计算机显示 |
| 打印(分页式媒体) | |
| projection | 投影 |
| all | 所有媒体 (默认) |
一些其他指定媒介类型的规则。
类型可以在样式表通过link方式加到文档时被指定,这是文档的标签语言允许的 。例如,在HTML中,你可以通过在 LINK 标签上添加media属性来指定媒介类型。
在CSS中,你可以在样式表开头使用 @import 一个url来引入另外的样式表,同时指定其媒介类型。
根据这些知识,你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。
想获取媒介类型更多细节,请参考CSS规范中的 Media 部分。
接下来将介绍更多 display 属性的例子: XML data.
语法
CSS有一套用于描述其语言的术语。在前面的教程中,你应该已经写过这个样式:
strong {
color: red;
}在CSS的术语中,上面这段代码被称为一条规则(rule)。这条规则以选择器strong开始,它选择要在DOM中哪些元素上使用这条规则。
花括号中的部分称为声明(declaration)
关键字color是一个属性, red 是其对应的值.
同一个声明中的 属性和值组成一个名值对(property-value pairs),名值对用分号分隔.
如何插入样式表
当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:
外部样式表(可复用与多个页面)
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
- 外部样式表可以在任何文本编辑器中进行编辑。
- 文件不能包含任何的 html 标签。
- 外部样式表文件应该以 .css 扩展名进行保存。
内部样式表(单个文档)
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式(单个文档中的单个元素)
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>CSS3
简介
CSS3 现状
- 浏览器支持程度差,需要添加私有前缀
- 移动端支持优于 PC 端
- 不断改进中
- 应用相对广泛
如何对待?
- 坚持渐进增强原则
- 考虑用户群体
- 遵照产品的方案
- 听 Boss 的
C3 新增选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
颜色
- RGBA
- HSLA
文本
- 文字阴影
- 文字换行
- 文字溢出
边框
- 边框圆角
- 边框阴影
- 边框图片
盒模型
- IE盒模型
- W3C盒模型
背景
- 背景图尺寸
- 背景裁切
- 背景定位参照点
- 多重背景
渐变
- 线性渐变
- 径向渐变
- 重复渐变
伸缩布局
- 主轴
- 侧轴
- 方向
多列布局
转换
过渡
- 帧动画
- 补间动画
动画
媒体查询
- html 标签形式
- CSS 属性形式
Web字体
- 字体格式
- 字体图标
兼容性
CSS 语法
基础语法
selector {declaration1; declaration2; ... declarationN }selector {property: value}语法与规则
| 名称 | 版本 | 描述 |
|---|---|---|
| !important | CSS1 | 提升指定样式条目的应用优先权。 |
| /*comment*/ | CSS1 | CSS中的注释 /* 这里是注释内容 */ |
| @import | CSS1/3 | 指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明 |
| @charset | CSS2 | 在外部样式表文件内使用。指定该样式表使用的字符编码。 |
| @media | CSS2/3 | 指定样式表规则用于指定的媒体类型和条件。 |
| @font-face | CSS3 | 设置嵌入HTML文档的OpenType字体。 |
| @page | CSS2 | 设置页面容器的版式,方向,边空等。 |
| @keyframes | CSS3 | 指定动画名称和动画效果。 |
| @supports | CSS3 | 检测是否支持某特性。 |
| 语法 | 描述 |
|---|---|
| !important | 语法: Selector { sRule!important; } 说明: 提升指定样式规则的应用优先权。
|
| /*comment*/ | 语法: /* 这里是注释内容 */ 说明: 用于注释CSS中的某些内容。 |
| @import | 语法: @import <url> <media_query_list> <media_query_list>:[<media_query>[',' <media_query>]*]? <media_query>:[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]* <expression>:'('<media_feature>[:<value>]?')' 取值: 说明: 指定导入的外部样式表及目标媒体。
|
| @charset | 语法: @charset <charset>; 取值: 说明: 在外部样式表文件内使用。指定该样式表使用的字符编码。
|
| @media | 语法: @media:<media_query_list> <media_query_list>:[<media_query>[',' <media_query>]*]? <media_query>:[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]* <expression>:'('<media_feature>[:<value>]?')' 取值: 说明: 指定样式表规则用于指定的媒体类型和查询条件。
|
| @font-face | 语法: 取值: 说明: 设置嵌入HTML文档的字体。
|
| @page | 语法: @page <label> <pseudo-classes>{ sRules } 取值: 说明: 设置页面容器的版式,方向,边空等。 |
| @keyframes | 语法: @keyframes <identifier> { <keyframes-blocks> } <keyframes-blocks>:[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]* 取值: 说明: 指定动画名称和动画效果。
|
| @supports | 语法: @supports (rule)[operator (rule)]* { sRules } operator:or | and | not 取值: 说明: 检测是否支持某CSS特性
|
取值与单位
长度(Length)
长度取值 Length Data Types
长度单位 Length Units
| 长度单位 | 版本 | 描述 |
|---|---|---|
| 文本相对长度单位 Font-relative Length Units | ||
| em | CSS1 | 相对于当前对象内文本的字体尺寸 |
| ex | CSS1 | 相对于字符“x”的高度。通常为字体高度的一半 |
| ch | CSS3 | 数字“0”的宽度 |
| rem | CSS3 | 相对于根元素(即html元素)font-size计算值的倍数 |
| 视口相对长度单位 Viewport-relative Length Units | ||
| vw | CSS3 | 相对于视口的宽度。视口被均分为100单位的vw |
| vh | CSS3 | 相对于视口的高度。视口被均分为100单位的vh |
| vmax | CSS3 | 相对于视口的宽度或高度,总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax |
| vmin | CSS3 | 相对于视口的宽度或高度,总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin |
| 绝对长度单位 Absolute Length Units | ||
| cm | CSS1 | 厘米 |
| mm | CSS1 | 毫米 |
| q | CSS3 | 1/4毫米(quarter-millimeters); 1q = 0.25mm |
| in | CSS1 | 英寸(inches); 1in = 2.54cm |
| pt | CSS1 | 点(points); 1pt = 1/72in |
| pc | CSS1 | 派卡(picas); 1pc = 12pt |
| px | CSS1 | 像素(pixels); 1px = 1/96in |
| 属性 | 描述 |
|---|---|
| <length> | 说明: |
| em | 说明: 相对长度单位。相对于当前对象内文本的字体尺寸。
|
| ex | 说明: 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
|
| ch | 说明: 数字“0”的宽度 |
| rem | 说明: 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 |
| vw | 说明: 相对于视口的宽度。视口被均分为100单位的vw 示例代码: 如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100 |
| vh | 说明: 相对于视口的高度。视口被均分为100单位的vh 示例代码: 如果视口的高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100 |
| vmax | 说明: 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax 示例代码: 如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为24mm,即(8x300)/100,因为宽度比高度要大,所以计算的时候相对于宽度。 |
| vmin | 说明: 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin 示例代码: 如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100,因为高度比宽度要小,所以计算的时候相对于高度。 |
| cm | 说明: 厘米(Centimeters)。绝对长度单位。
示例代码: |
| mm | 说明: 毫米(Millimeters)。绝对长度单位。
示例代码: |
| q | 说明: 1/4毫米(quarter-millimeters)。绝对长度单位。
示例代码: |
| in | 说明: 英寸(Inches)。绝对长度单位。
示例代码: |
| pt | 说明: 点(Points)。绝对长度单位。
示例代码: |
| pc | 说明: 派卡(Picas)。绝对长度单位。相当于我国新四号铅字的尺寸。
示例代码: |
| px | 说明: 相对长度单位。像素(Pixels)。
示例代码: |
角度(Angle)
角度取值 Angle Data Types
角度单位 Angle Units
| 角度单位 | 描述 |
|---|---|
| <angle> | 说明: |
| deg | 说明: 度(Degress)。一个圆共360度 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad |
| grad | 说明: 梯度(Gradians)。一个圆共400梯度 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad |
| rad | 说明: 弧度(Radians)。一个圆共2π弧度 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad |
| turn | 说明: 转、圈(Turns)。一个圆共1圈 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad |
时间(Time)
| 时间单位 | 描述 |
|---|---|
| <time> | 说明: |
| s | 说明: 秒
|
| ms | 说明: 毫秒
|
频率(Frequency)
频率取值 Frequency Data Types
| 频率取值 | 版本 | 描述 |
|---|---|---|
| <frequency> | CSS3 | <number>接频率单位。 |
频率单位 Frequency Units
| 频率单位 | 描述 |
|---|---|
| <frequency> | 说明: |
| Hz | 说明: 赫兹
|
| kHz | 说明: 千赫兹
|
布局(Layout-specific)
特殊布局取值 Layout-specific Data Types
特殊布局单位 Layout-specific Units
分辨率(Resolution)
分辨率取值 Resolution Data Types
分辨率单位 Resolution Units
| 分辨率单位 | 版本 | 描述 |
|---|---|---|
| dpi | CSS3 | 说明: 每英寸包含点的数量(dots per inch)
示例代码: |
| dpcm | CSS3 | 说明: 每厘米包含点的数量(dots per centimeter)
示例代码: |
| dppx | CSS3 | 说明: 每像素包含点的数量(dots per pixel)
示例代码: |
颜色(Color)
颜色值 Color Data Types
| 名称 | 版本 | 描述 |
|---|---|---|
| <color> | CSS1/CSS3 | 用来表示颜色的关键字或者数值规则 <color> 包括 Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent, currentColor |
| Color Name | CSS1 | 说明: |
| HEX | CSS1 | 说明: #RRGGBB 或 #RGB 取值: 说明: 十六进制记法
|
| RGB | CSS2 | 说明: RGB(R,G,B) 取值: 说明: RGB记法。
|
| RGBA | CSS3 | 说明: RGBA(R,G,B,A) 取值: 说明: RGBA记法。
|
| HSL | CSS3 | 说明: HSL(H,S,L) 取值: 说明: HSL记法。 |
| HSLA | CSS3 | 说明: HSLA(H,S,L,A) 取值: 说明: |
| transparent | CSS1/CSS3 | 说明: 用来指定全透明色彩。
|
| currentColor | CSS3 | 说明: 在CSS1和CSS2中定义了 border-color 属性的默认值是 color 属性的值,但却没有为此定义一个相应的关键字。 这个问题在 SVG 中被意识到了,于是在 SVG 1.0 中引入了 currentColor 关键字。 在CSS3中扩展了颜色值包含 currentColor 关键字,并用于所有接受颜色的属性上。 currentColor是 color 属性的值,具体意思是指:currentColor关键字的使用值是 color 属性值的计算值。
|
文本(Textual)
文本值 CSS Textual Data Types
| 名称 | 版本 | 描述 |
|---|---|---|
| inherit | CSS2.1 | 说明: 该值使得属性能够继承祖先设置。
|
| initial | CSS3 | 说明: 属性初始值。
|
| unset | CSS3 | 说明: 擦除属性申明。
|
| <string> | CSS2 | 说明: 字符串(含转义字符串)。
|
| <url> | CSS2 | 语法: URL 是对一个资源的指针,它使用函数符号 <url> 来表示,语法如下: <url> = url( <string> <url-modifier>* ) 说明: |
| <identifier> | CSS2 | 说明: 使用用户自定义标识名作为组件取值。
|
函数(Functional)
函数值 CSS Functional Notations Data Types
| 名称 | 版本 | 描述 |
|---|---|---|
| calc() | CSS3 | 语法: calc() = calc(四则运算) 说明: 用于动态计算长度值。
|
| toggle() | CSS3 | 语法: toggle() = toggle(<value>#) 说明: 允许子孙元素使用取值序列中的值循环替换继承而来的值。
|
生成内容(Content)
生成内容值 CSS Content Notations Data Types
| 名称 | 版本 | 描述 |
|---|---|---|
| counter() | CSS2/3 | 语法: counter() = [ counter(name) | counters(name, list-style-type) ]{1,} 说明: 插入计数器。
|
| counters() | CSS2/3 | 语法: counters() = [ counters(name, string) | counters(name, string, list-style-type) ]{1,} 说明: |
| attr() | CSS2/3 | 语法: attr() = attr(attr-name) 说明: 插入元素的属性值。
|
图像(Image)
图像值 CSS Image Data Types
| 名称 | 版本 | 描述 |
|---|---|---|
| <image> | CSS1/CSS3 | 语法: <image> = <url> | image() | image-set() | element() | cross-fade() | <gradient> 说明: <image> 值表示一个2D图像,可以是url引用,图像符号,渐变符号。
|
| image() | CSS3 | 语法: 说明: image() 用于指定图像或者图像替代。允许作者这样做:
|
| image-set() | CSS3 | 语法: image-set() = image-set( <image-set-option># ) <image-set-option> = [ <image> | <string> ] <resolution> 说明: image-set() 可以根据用户设备的分辨率匹配合适的图像。
|
| <gradient> | CSS3 | 语法: 说明: <gradient> 允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像。
|
| linear-gradient() | CSS3 | 语法: <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <length> | <percentage> ]? 取值: 下述值用来表示渐变的方向,可以使用角度或者关键字来设置: <color-stop> 用于指定渐变的起止颜色: 说明: 用线性渐变创建图像。
|
| radial-gradient() | CSS3 | 语法: <radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+) <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]? <shape> = circle | ellipse <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ] <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner <circle-size> = <length> <ellipse-size> = [ <length> | <percentage> ]{2} <shape-size> = <length> | <percentage> <color-stop> = <color> [ <length> | <percentage> ]? 取值: <position> 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center <shape> 确定圆的类型 <extent-keyword> circle | ellipse 都接受该值作为 size <circle-size> circle 接受该值作为 size <ellipse-size> ellipse 接受该值作为 size <color-stop> 用于指定渐变的起止颜色: 说明: 用径向渐变创建图像。
|
| repeating-linear-gradient() | CSS3 | 语法: <repeating-linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <length> | <percentage> ]? 取值: 下述值用来表示渐变的方向,可以使用角度或者关键字来设置: <color-stop> 用于指定渐变的起止颜色: 说明: 用重复的线性渐变创建图像。
|
| repeating-radial-gradient() | CSS3 | 语法: <repeating-radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+) <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]? <shape> = circle | ellipse <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ] <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner <circle-size> = <length> <ellipse-size> = [ <length> | <percentage> ]{2} <shape-size> = <length> | <percentage> <color-stop> = <color> [ <length> | <percentage> ]? 取值: <position> 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center <shape> 确定圆的类型 <extent-keyword> circle | ellipse 都接受该值作为 size <circle-size> circle 接受该值作为 size <ellipse-size> ellipse 接受该值作为 size <color-stop> 用于指定渐变的起止颜色: 说明: 用重复的径向渐变创建图像。
|
数字(Numeric)
数字值 CSS Numeric Data Types
| 名称 | 版本 | 描述 |
|---|---|---|
| <number> | CSS2 | 说明: 浮点数。
|
| <integer> | CSS2 | 说明: 整数。
|
| <percentage> | CSS2 | 说明: <number>接%
|
高级语法
选择器的分组
可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}继承及其问题
继承
有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。
继承性是从自己开始,直到最小的元素。
哪些属性能继承?
color、 text-开头的、line-开头的、font-开头的。
这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。
问题
根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:
body {
font-family: Verdana, sans-serif;
}根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。
通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。
但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。我们又该如何是好呢?
友善地对待Netscape 4
幸运地是,你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}4.0 浏览器无法理解继承,不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做。
继承是一个诅咒吗?
如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则:
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}层叠性
层叠性:就是css处理冲突的能力。
所有的权重计算,没有任何兼容问题!
CSS像艺术家一样优雅,像工程师一样严谨。
多重样式层叠次序
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权。
当选择器,选择上了某个元素的时候,那么要这么统计权重:
id的数量,类的数量,标签的数量
权重问题大总结
1) 先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。
2) 如果没有选中,那么权重是0。如果大家都是0,就近原则。
3) !important标记
■ 选择上了,数权重,(id的数量,类的数量,标签的数量)。如果权重一样,谁写在后面听谁的。
■ 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比选择器权重,如果权重再一样重,谁写在后面听谁的。继承来的 !important 属性 权重任然为0。
■ important是英语里面的“重要的”的意思。我们可以通过语法:
1 k:v !important;来给一个属性提高权重。这个属性的权重就是无穷大。
1 font-size:60px !important;1 font-size:60px; !important; → 不能把!important写在外面
1 font-size:60px important; → 不能忘记感叹号
!important需要强调3点:
1) !important提升的是一个属性,而不是一个选择器
1 p{
2 color:red !important; → 只写了这一个!important,所以就字体颜色属性提升权重
3 font-size: 100px ; → 这条属性没有写!important,所以没有提升权重
4 }
5 #para1{
6 color:blue;
7 font-size: 50px;
8 }
9 .spec{
10 color:green;
11 font-size: 20px;
12 }
<p id="para1" class="spec">what kind of color and font-size? </p>
2) !important无法提升继承的权重,该是0还是0
比如HTML结构:
1 <div>
2 <p>哈哈哈哈哈哈哈哈</p>
3 </div>
1 div{
2 color:red !important;
3 }
4 p{
5 color:blue;
6 }
3)!important不影响就近原则
如果大家都是继承来的,按理说应该按照“就近原则”,那么important能否影响就近原则呢?
! important做站的时候,尽量不要使用。因为会让css写的很乱。
现在,我们知道层叠性能比较很多东西:
选择器的写法权重,谁离的近,谁写在下面。
不进位,实际上能进位(255个标签,等于1个类名)但是没有实战意义!
如果权重一样,那么以后出现的为准:
================================我是华丽丽的分界线=================================
如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。
标准文档流
标准流有哪些微观现象?
1) 空白折叠现象:
行内元素中,多个连续的空格或换行会折叠为一个空格。
比如,如果我们想让img标签之间没有空隙,必须紧密连接:
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
2) 高矮不齐,底边对齐:
3) 自动换行,一行写不满,换行写。
4)标准文档流中,margin的塌陷现象,竖直方向的margin不叠加,以较大的为准。
如果不在标准流,比如盒子都浮动了,那么两个盒子之间没有塌陷现象。
标准文档流中的标签等级
块级元素
● 霸占一行,不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度,那么宽度将默认变为父亲的100%。
行内元素
● 与其他行内元素并排
● 不能设置宽、高,但可以设置 margin 和 padding。默认的宽度,就是文字的宽度。高度为零。
HTML 中标签分类:文本级、容器级
文本级:p、span、a、b、i、u、em
容器级:div、h系列、li、dt、dd
CSS 中标签分类:行内元素、块级元素
和 HTML 的很像,就 p 不一样
所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素。
所有的容器级标签都是块级元素。
块级元素和行内元素的相互转换
块级元素可以设置为行内元素
行内元素可以设置为块级元素
div{
display: inline;
background-color: pink;
width: 500px;
height: 500px;
}
display是“显示模式”的意思,用来改变元素的行内、块级性质
inline就是“行内”。
一旦,给一个标签设置
display: inline;那么,这个标签将立即变为行内元素。此时它和一个span无异:
● 此时这个div不能设置宽度、高度;
● 此时这个div可以和别人并排了
同样的道理,
span{
display: block;
width: 200px;
height: 200px;
background-color: pink;
}“block”是“块”的意思
让标签变为块级元素。此时这个标签,和一个div无异:
● 此时这个span能够设置宽度、高度
● 此时这个span必须霸占一行了,别人无法和他并排
● 如果不设置宽度,将撑满父亲
标准流里面限制非常多,标签的性质恶心。比如,我们现在就要并排、并且就要设置宽高。在标准流内是不能实现的。
所以,移民!脱离标准流!
脱离标准流
脱标的元素可以设置宽、高,可以在一行内并排
即脱离标准流的目的是为了让元素既可以设置宽高,同时又可以做并排。
css中一共有三种手段,使一个元素脱离标准文档流:
1) 浮动
2) 绝对定位
3) 固定定位
浮动
浮动的性质
浮动的性质:脱标、贴边、字围、收缩。
浮动的元素脱标
一个span标签不需要转成块级元素(不用 display:block;),就能够设置宽度、高度了。所以能够证明一件事儿,就是所有脱标的标签已经不区分行内、块了。也就是说,一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。
1 span{
2 float: left;
3 width: 200px;
4 height: 200px;
5 background-color: orange;
6 }
浮动的元素互相贴靠
如果有足够空间,那么就会靠着2哥。如果没有足够的空间,那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥,自己去贴左墙。
浮动的元素有“字围”效果
浮动的元素收缩
收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)。
清除浮动( 闭合浮动)
清除浮动的目的: 就是为了解决 父 盒子高度为 0 的问题。
若一个父盒子没有设置高度,那么可以被盒子的内容撑出高度;但一个父盒子是不能被浮动的儿子撑出高度的。因为浮动的元素脱离了标准流。
浮动的元素若存在有高度的父盒子,则浮动的盒子相对该盒子的宽高来作为浮动的参考坐标;若不存在有高度的父盒子,则浮动的元素以整个页面为参考坐标进行浮动。
来看一个实验:现在有两个div,div身上没有任何属性(没有脱标,块级元素)。但每个div中都有li,这些li都是浮动的。
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
text-align: center;
}
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
我们本以为这些li,会分为两排,但是,第二组中的第1个li,去贴靠第一组中的最后一个li了。
原因就是因为两个div盒子没有高度,不能给自己浮动的孩子们,撑起一个容器。
标准流中,两个 div 盒子若没有设置高度,则可以被盒子里面的内容撑出高度;但若盒子里面的所有内容浮动后,盒子里面的内容就脱离了标准流,两个 div 盒子就没有了高度,不能为自己浮动的孩子撑起一个容器,故会发生两个 div 块级元素中浮动的元素相互贴靠的现象。
方法1:给浮动元素的祖先元素加足够高度
如果一个元素要浮动,那么它的祖先元素一定要有足够的高度。有足够高度的盒子,才能关住浮动,不受周围浮动元素的影响。只要浮动在一个有足够高度的盒子中,那么这个浮动就不会影响后面的浮动元素。若第一个浮动的盒子没有加高度或没有加足够的高度,那么即使第二个浮动的盒子加了足够的盒子,也会发生贴边现象。
*{
margin: 0;
padding: 0;
}
div{
height: 50px; → 加足够 height
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
text-align: center;
}
<div class="box1"> → 加足够 height
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div class="box2"> → 加足够 height
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
方法2:clear:both
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div class="box2"> → 加 clear:both;属性
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
clear就是清除,both指的是左浮动、右浮动都要清除。意思就是:清除左右盒子对我的影响。
这种方法有一个非常大的、致命的问题,上下margin失效了。
方法3-1:外墙法(额外标签法)
在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。
墙用自己的身高当做了间隙。
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
</div>
<div class="cl h8"></div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
方法3-2:内墙法(额外标签法)
内墙法的优点就是,能够让第二个盒子中浮动的元素不去追第一个盒子中浮动的元素,并且能把第一个盒子撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了。
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>设计模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>学习方法</li>
<li>英语水平</li>
<li>面试技巧</li>
</ul>
</div>
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
方法4:overflow:hidden;
overflow就是“溢出”的意思, hidden就是“隐藏”的意思。
1 overflow:hidden;
表示“溢出隐藏”。所有溢出边框的内容,都要隐藏掉。
本意就是清除溢出到盒子外面的文字。但是,前端开发工程师又发现了,它能做偏方。
overflow: hidden; 触发 bfc 模式 就不用清楚浮动
一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden;
那么,父亲就能被儿子撑出高了。这是一个偏方。
并且,overflow:hidden;能够让margin生效。
1 div{ 2 width: 400px; 3 border: 10px solid black; 4 overflow: hidden; 5 }
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
<div> → overflow:hidden;
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
1 overflow: hidden; 2 _zoom:1; --→ 伴生属性。
方法5:伪元素
.clearfix:after {
content:””;
Visibility:hidden;
Display:block;
Height:0;
Clear:both;
}
.clearfix{
Zoom:1;
}双伪元素
.clearfix:before,.clearfix:after{ display: table; content: ""; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
绝定定位
固定定位
盒模型
盒模型box model,什么是盒子?所有的标签都是盒子。无论是div、span、a都是盒子。图片、表单元素一律看做文本。
盒模型的两种形式
关于盒模型存在两种形式,分别是W
IE盒模型
IE盒模型只会出现在IE5版本和IE6+的怪异模式中。
IE模型下 width = padding + content + border;
W3C盒模型
W3C盒模型下 width = content
CSS3中的盒模型
CSS3 中可以自定义盒模型的呈现方式:
box-sizing: border-box;
盒模型的宽高以border为界,即包含border和padding
width = border + padding + content
box-sizing: content-box;
盒模型的宽高以内容为界,不包含border和padding
width = content
盒模型的构成
盒模型的主要构成:content、padding、border、margin。
width、height:默认情况下 width、height是内容的宽度、高度,而不是盒子的宽度、高度。
padding:内边距,边框和文字内容之间的距离。padding有颜色。
border:边框,3要素,4条边。3要素。
border-width、border-style、border-color;4条边:border-top、border-right、border-bottom、border-left。
margin:外边距
网页稳定性:
width 和 height 最稳定
其次 padding
width 和 height
真实占有宽度= 左border + 左padding +
width + 右padding + 右border
真实占有高度= 上border + 上padding + height + 下padding + 下border
如果想保持一个盒子的真实占有宽度不变,那么加width就要减左或右padding。加左或右padding就要减width。
如果想保持一个盒子的真实占有高度不变,那么加height就要减上或下padding。加上或下padding就要减height。
如果想保持一个盒子的真实占有宽高不变,那么加width或height就要减padding。加padding就要减width和height。
宽度可以继承,和父亲一样宽;高度不可以继承,和内容一样高。
margin
margin的塌陷现象(标准流)
标准文档流中,竖直方向的margin不叠加,以较大的为准。
如果不在标准流,比如盒子都浮动了,那么两个盒子之间没有塌陷现象,margin 可以叠加.
标准流:
非标准流:
盒子左右居中 margin:0 auto;(标准流)
margin-left: auto;
margin-right: auto;
简写为
margin: 0 auto;注意:
1) 使用margin:0 auto; 的盒子,必须有明确的width(不写width 通栏100%)。
2) 只有标准流的盒子,才能使用margin:0
auto; 居中。
也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;
3) margin:0
auto;是在居中盒子,不是居中文本。
文本的居中,要使用 text-align:center;
text-align:left; 没啥用,因为默认居左
text-align:right; 文本居右
善于使用父亲的padding,而不是儿子的margin
如果父亲没有border,那么儿子的margin实际上踹的是“流”,踹的是这“行”。所以,父亲整体也掉下来了
这个p有一个margin-top踹父亲,试图将自己下移
1 <div> 2 <p></p> 3 </div>
结果:
margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。
所以,我们一定要善于使用父亲的padding,而不是儿子的margin。但加 padding 需要减宽或高。
padding
也就是说,background-color将填充所有boder以内的区域。
padding 可以出现溢出现象。
一些元素,默认带有padding,比如ul标签。
所以,我们为了做站的时候,便于控制,总是喜欢清除这个默认的padding
1 *{
2 margin: 0;
3 padding: 0;
4 }
*的效率不高,所以我们使用并集选择器,罗列所有需要清除默认margin和padding的标签
border
颜色如果不写,默认是黑色。另外两个属性不写,要命了,显示不出来边框。
如果公司里面的设计师,追求极高的页面还原度,那么不能使用css来制作边框。
就要用到图片,就要切图了。所以,比较稳定的就几个:solid、dashed、dotted
伪类
类就是工程师加的,比如div属于box类,很明确,就是属于box类。但是a属于什么类?不明确。因为要看用户有没有点击、有没有触碰。所以,就叫做“伪类”。
伪类用冒号来表示。
a标签的伪类
a标签有4种伪类。
:link 表示, 用户没有点击过这个链接的样式。 是英语“链接”的意思。
:visited 表示, 用户访问过了这个链接的样式。 是英语“访问过的”的意思。
:hover 表示, 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。
:active 表示, 用户用鼠标点击该链接,但是不松手,此刻的样式。 是英语“激活”的意思。
这四种状态,在css中,必须按照固定的顺序写:
a:link
、a:visited 、a:hover 、a:active
如果不按照顺序,那么将失效。“爱恨准则”love hate。必须先爱,后恨。
超级链接的美化
a标签在使用的时候,非常的难。因为不仅仅要控制a这个盒子,也要控制它的伪类。
我们一定要将a标签写在前面,:link、:visited、:hover、:active这些伪类写在后面。
a标签中,描述盒子; 伪类中,描述文字的样式、背景。
1 .nav ul li a{
2 display: block;
3 width: 120px;
4 height: 40px;
5 }
6 .nav ul li a:link ,.nav ul li a:visited{
7 text-decoration: none;
8 background-color: yellowgreen;
9 color:white;
10 }
11 .nav ul li a:hover{
12 background-color: purple;
13 font-weight: bold;
14 color:yellow;
15 }
最标准的,就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中,发现不写link、visited浏览器也挺兼容。所以这些“老油条”们,就把a标签简化了:
a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态。
1 .nav ul li a{
2 display: block;
3 width: 120px;
4 height: 50px;
5 text-decoration: none;
6 background-color: purple;
7 color:white;
8 }
9 .nav ul li a:hover{
10 background-color: orange;
11 }
其他标签的伪类
CSS 定位
定位有四种,分别是静态定位、相对定位、绝对定位、固定定位。
定位的基本思想,允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。
只有定位了的元素,才能有z-index值。即,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。
如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁能压住别人。定位了的元素,永远能够压住没有定位的元素。
从父现象:若父亲的z-index值小,儿子再牛逼也没用。
背景定位
CSS 精灵
“css精灵”,英语css sprite,所以也叫做“css雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。
相对定位
特点:不脱标,老家留坑,形影分离。
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占空间仍保留。
作用:微调元素;子绝父相(做绝对定位的参考)。
就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。
相对定位参考点:
以定位前的盒子为参考。
也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位
1 position:relative; → 必须先声明,自己要相对定位了,
2 left:100px; → 然后进行调整。
3 top:150px; → 然后进行调整。
相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘。
绝对定位
元素框从标准流中完全删除,所占空间关闭,不再遵守标准流的性质,margin:0 auto;失效。盒子居中(left:50%; margin-left:负的宽度的一半)
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
元素绝对定位后,不论原来它在正常流中生成何种类型的框,定位后都生成一个块级框,不再区分所谓的行内元素、块级元素,不需要display:block;就可以设置宽、高。
1)元素没有已定位的祖先元素
如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角。
如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角。
2)元素存在已定位的祖先元素
如果父辈元素中存在已定位的元素,那么将以最近的父辈元素,为参考点。无视参考盒子的padding,以其border内侧为参考点,进行定位。
子绝父绝、子绝父相、子绝父固,都可以给儿子定位。但是,工程上子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。工程上,“子绝父相”有意义,父亲没有脱标,儿子脱标在父亲的范围里面移动。
固定定位
web 字体
CSS 兼容性
CSS 属性
定位 Positioning
布局 Layout
尺寸 Dimension
外补白 Margin
内补白 Padding
边框 Border
- border
- border-width
- border-style
- border-color
- border-top
- border-top-width
- border-top-style
- border-top-color
- border-right
- border-right-width
- border-right-style
- border-right-color
- border-bottom
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-left
- border-left-width
- border-left-style
- border-left-color
- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- box-shadow
- border-image
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
背景 Background
颜色 Color
字体 Font
文本 Text
文本装饰 Text Decoration
书写模式 Writing Modes
列表 List
表格 Table
内容 Content
用户界面 User Interface
多列 Multi-column
伸缩盒 Flexible Box(旧)
伸缩盒 Flexible Box(新)
转换 Transform
过渡 Transition
动画 Animation
打印 Printing
媒体查询 Media Queries
Only IE
Only Firefox
Only Webkit
布局
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| display | CSS2/3 | 无 | 设置或检索对象是否及如何显示 |
| float | CSS1 | 无 | 该属性的值指出了对象是否及如何浮动。请参阅clear属性 |
| clear | CSS1 | 无 | 该属性的值指出了不允许有浮动对象的边。请参阅float属性 |
| visibility | CSS2 | 有 | 设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间 |
| overflow | CSS2/3 | 无 | 复合属性。检索或设置对象处理溢出内容的方式。 |
| overflow-x | CSS2/3 | 无 | 检索或设置对象处理横向溢出内容的方式。 |
| overflow-y | CSS2/3 | 无 | 检索或设置对象处理纵向溢出内容的方式。 |
| title | title |
|---|---|
| display | 语法: display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex 默认值:inline 适用于:所有元素 继承性:无 动画性:否 计算值:指定值,除浮动,绝对定位和根元素外 媒体:视觉 取值: 说明: 设置或检索对象是否及如何显示。
|
| float | 语法: float:none | left | right 默认值:none 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: |
| clear | 语法: clear:none | left | right | both 默认值:none 适用于:块级元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 该属性的值指出了不允许有浮动对象的边。请参阅float属性
|
| visibility | 语法: visibility:visible | hidden | collapse 默认值:visible 适用于:所有元素 继承性:有 动画性:是 计算值:指定值 取值: 说明: 设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间
|
| overflow | 语法: overflow:<overflow-style> <overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments 默认值:visible 适用于:块容器,伸缩盒容器,grid容器 继承性:无 动画性:否 计算值:指定值 取值: 说明: 复合属性。检索或设置对象处理溢出内容的方式。参阅overflow-x、overflow-y属性
|
| overflow-x | 语法: overflow-x:<overflow-style> <overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments 默认值:visible 适用于:块容器,伸缩盒容器,grid容器 继承性:无 动画性:否 计算值:指定值 取值: 说明: |
| overflow-y | 检索或设置对象处理纵向溢出内容的方式。 |
| 属性 | 值 | 描述 |
|---|---|---|
| visibility | 语法: visibility:visible | hidden | collapse 默认值:visible 适用于:所有元素 继承性:有 动画性:是 计算值:指定值 取值: 说明: 设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间
|
动画
@keyframes mymove
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow;}
50% {background: blue;left:200px; top:0px;}
100% {background: green;}
}
object.style.animationName="mymove" //JavaScript 语法
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| animation | CSS3 | 无 | 复合属性。检索或设置对象所应用的动画特效 |
| animation-name | CSS3 | 无 | 检索或设置对象所应用的动画名称 |
| animation-duration | CSS3 | 无 | 检索或设置对象动画的持续时间 |
| animation-timing-function | CSS3 | 无 | 检索或设置对象动画的过渡类型 |
| animation-delay | CSS3 | 无 | 检索或设置对象动画延迟的时间 |
| animation-iteration-count | CSS3 | 无 | 检索或设置对象动画的循环次数 |
| animation-direction | CSS3 | 无 | 检索或设置对象动画在循环中是否反向运动 |
| animation-play-state | CSS3 | 无 | 检索或设置对象动画的状态 |
| animation-fill-mode | CSS3 | 无 | 检索或设置对象动画时间之外的状态 |
| 属性 | 描述 |
|---|---|
| animation | 语法: animation:<single-animation>[,<single-animation>]* <single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> 默认值:看每个独立属性 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:看每个独立属性 媒体:视觉 取值: 说明: 复合属性。检索或设置对象所应用的动画特效。
|
| animation-name | 语法: animation-name:<single-animation-name>[,<single-animation-name>]* <single-animation-name> = none | <identifier> 默认值:none 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:指定值 媒体:视觉 相关属性:[ @keyframes ] 取值: 说明: |
| animation-duration | 语法: 取值: 说明: 检索或设置对象动画的持续时间
|
| animation-timing-function | 语法: animation-timing-function:<single-animation-timing-function>[,<single-animation-timing-function>]* <single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) 默认值:ease 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: 检索或设置对象动画的过渡类型
|
| animation-delay | 语法: 取值: 说明: 检索或设置对象动画的延迟时间
|
| animation-iteration-count | 语法: animation-iteration-count:<single-animation-iteration-count>[,<single-animation-iteration-count>]* <single-animation-iteration-count> = infinite | <number> 默认值:1 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: 检索或设置对象动画的循环次数
|
| animation-direction | 语法: animation-direction:<single-animation-direction>[,<single-animation-direction>]* <single-animation-direction> = normal | reverse | alternate | alternate-reverse 默认值:normal 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: 检索或设置对象动画在循环中是否反向运动
|
| animation-play-state | 语法: animation-play-state:<single-animation-play-state>[,<single-animation-play-state>]* <single-animation-play-state> = running | paused 默认值:running 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: 检索或设置对象动画的状态
|
| animation-fill-mode | 语法: animation-fill-mode:<single-animation-fill-mode>[,<single-animation-fill-mode>]* <single-animation-fill-mode> = none | forwards | backwards | both 默认值:none 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: 检索或设置对象动画时间之外的状态
|
背景
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| background | CSS1/3 | 无 | 复合属性。设置或检索对象的背景特性 |
| background-color | CSS1 | 无 | 设置或检索对象的背景颜色 |
| background-image | CSS1/3 | 无 | 设置或检索对象的背景图像 |
| background-repeat | CSS1/3 | 无 | 设置或检索对象的背景图像如何铺排填充 |
| background-attachment | CSS1/3 | 无 | 设置或检索对象的背景图像是随对象内容滚动还是固定的 |
| background-position | CSS1/3 | 无 | 设置或检索对象的背景图像位置 |
| background-origin | CSS3 | 无 | 设置或检索对象的背景图像显示的原点 |
| background-clip | CSS3 | 无 | 检索或设置对象的背景向外裁剪的区域 |
| background-size | CSS3 | 无 | 检索或设置对象的背景图像的尺寸大小 |
| 属性 | 描述 |
|---|---|
| background | 语法: background:[ <bg-layer>, ]* <final-bg-layer> <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:看每个独立属性 计算值:看每个独立属性 取值: 说明: 复合属性。检索或设置对象的背景特性(背景色 <' background-color '> 不能设置多组)。
|
| background-color | 语法: 取值: 说明: 设置或检索对象的背景颜色。
|
| background-image | 语法: background-image:<bg-image> [ , <bg-image> ]* <bg-image> = <image> | none 默认值:none 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象的背景图像。
|
| background-repeat | 语法: background-repeat:<repeat-style> [ , <repeat-style> ]* <repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | 默认值:repeat 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象的背景图像如何铺排填充。必须先指定 <' background-image '> 属性。
|
| background-attachment | 语法: background-attachment:<attachment> [ , <attachment> ]* <attachment> = fixed | scroll | local 默认值:scroll 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: |
| background-position | 语法: background-position:<position> [ , <position> ]* <position> = [ left | center | right | top | bottom | <percentage> | 默认值:0% 0%,效果等同于left top 适用于:所有元素 继承性:无 动画性:是 计算值:指定值 取值: 说明: 设置或检索对象的背景图像位置。必须先指定 <' background-image '> 属性。
|
| background-origin | 语法: 取值: 说明: 设置或检索对象的背景图像计算 <' background-position '> 时的参考原点(位置)。
|
| background-clip | 语法: 取值: 说明: 指定对象的背景图像向外裁剪的区域。
|
| background-size | 语法: background-size:<bg-size> [ , <bg-size> ]* <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain 默认值:auto 适用于:所有元素 继承性:无 动画性:是,除非使用值为关键字 计算值:指定值 取值: 说明: 检索或设置对象的背景图像的尺寸大小。
|
边框
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| border | CSS1 | 无 | 复合属性。设置对象边框的特性 |
| border-width | CSS1 | 无 | 设置或检索对象边框宽度 |
| border-style | CSS1 | 无 | 设置或检索对象边框样式 |
| border-color | CSS1 | 无 | 设置或检索对象边框颜色 |
| border-top | CSS1 | 无 | 复合属性。设置对象顶边的特性 |
| border-top-width | CSS1 | 无 | 设置或检索对象顶边宽度 |
| border-top-style | CSS1 | 无 | 设置或检索对象顶边样式 |
| border-top-color | CSS1 | 无 | 设置或检索对象顶边颜色 |
| border-right | CSS1 | 无 | 复合属性。设置对象右边的特性 |
| border-right-width | CSS1 | 无 | 设置或检索对象右边宽度 |
| border-right-style | CSS1 | 无 | 设置或检索对象右边样式 |
| border-right-color | CSS1 | 无 | 设置或检索对象右边颜色 |
| border-bottom | CSS1 | 无 | 复合属性。设置对象底边的特性 |
| border-bottom-width | CSS1 | 无 | 设置或检索对象底边宽度 |
| border-bottom-style | CSS1 | 无 | 设置或检索对象底边样式 |
| border-bottom-color | CSS1 | 无 | 设置或检索对象底边颜色 |
| border-left | CSS1 | 无 | 复合属性。置对象左边的特性 |
| border-left-width | CSS1 | 无 | 设置或检索对象左边宽度 |
| border-left-style | CSS1 | 无 | 设置或检索对象左边样式 |
| border-left-color | CSS1 | 无 | 设置或检索对象左边颜色 |
| border-radius | CSS3 | 无 | 设置或检索对象使用圆角边框 |
| border-top-left-radius | CSS3 | 无 | 设置或检索对象左上角圆角边框 |
| border-top-right-radius | CSS3 | 无 | 设置或检索对象右上角圆角边框 |
| border-bottom-right-radius | CSS3 | 无 | 设置或检索对象右下角圆角边框 |
| border-bottom-left-radius | CSS3 | 无 | 设置或检索对象左下角圆角边框 |
| box-shadow | CSS3 | 无 | 设置或检索对象阴影 |
| border-image | CSS3 | 无 | 设置或检索对象的边框样式使用图像来填充 |
| border-image-source | CSS3 | 无 | 设置或检索对象的边框是否用图像定义样式或图像来源路径 |
| border-image-slice | CSS3 | 无 | 设置或检索对象的边框背景图的分割方式 |
| border-image-width | CSS3 | 无 | 设置或检索对象的边框厚度 |
| border-image-outset | CSS3 | 无 | 设置或检索对象的边框背景图的扩展 |
| border-image-repeat | CSS3 | 无 | 设置或检索对象的边框图像的平铺方式 |
| 属性 | 描述 |
|---|---|
| border | 语法: border:<line-width> || <line-style> || <color> <line-width> = <length> | thin | medium | thick <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:看每个独立属性 计算值:看每个独立属性 相关属性:[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ] 取值: 说明: 复合属性。设置对象边框的特性。参阅outline属性。
|
| border-width | 语法: border-width:<line-width>{1,4} <line-width> = <length> | thin | medium | thick 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:是 计算值:看每个独立属性 相关属性:[ border-top-width ] || [ border-right-width ] || [ border-bottom-width ] || [ border-left-width ] 取值: 说明: 设置或检索对象的边框宽度。
|
| border-style | 语法: border-style:<line-style>{1,4} <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:否 计算值:看每个独立属性 相关属性:[ border-top-style ] || [ border-right-style ] || [ border-bottom-style ] || [ border-left-style ] 取值: 说明: 设置或检索对象的边框样式。
|
| border-color | 语法: border-color:<color>{1,4} 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:是 计算值:看每个独立属性 相关属性:[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ] 取值: 说明: 设置或检索对象的边框颜色。参阅border-colors属性。
|
| border-top | |
| border-top-width | |
| border-top-style | |
| border-top-color | |
| border-right | |
| border-right-width | |
| border-right-style | |
| border-right-color | |
| border-bottom | |
| border-bottom-width | |
| border-bottom-style | |
| border-bottom-color | |
| border-left | |
| border-left-width | |
| border-left-style | |
| border-left-color | |
| border-radius | 语法: border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:看每个独立属性 计算值:看每个独立属性 取值: 说明: 设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数
|
| border-top-left-radius | |
| border-top-right-radius | |
| border-bottom-left-radius | |
| border-bottom-right-radius | |
| box-shadow | 语法: 取值: 说明: 设置或检索对象阴影。参阅 <' text-shadow '> 属性
|
| border-image | 语法: border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '> 默认值:看每个独立属性 适用于:看每个独立属性 继承性:无 动画性:看每个独立属性 计算值:看每个独立属性 取值: 说明: 复合属性。设置或检索对象的边框样式使用图像来填充。
|
| border-image-source | 语法: border-image-source:none | <image> 默认值:none 适用于:所有元素,除table元素设置了 <' border-collapse '> 为collapse之外 继承性:无 动画性:否 计算值:指定值 取值: 说明:设置或检索对象的边框样式使用图像路径。
|
| border-image-slice | 语法: border-image-slice:[ <number> | <percentage> ]{1,4} && fill? 默认值:100% 适用于:所有元素,除table元素设置了 <' border-collapse '> 为collapse之外 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象的边框背景图的分割方式。
|
| border-image-width | 语法: border-image-slice:[ <number> | <percentage> ]{1,4} && fill? 默认值:100% 适用于:所有元素,除table元素设置了 <' border-collapse '> 为collapse之外 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象的边框背景图的分割方式。
|
| border-image-outset | 语法: border-image-outset:[ <length> | <number> ]{1,4} 默认值:0 适用于:所有元素,除table元素设置了 <' border-collapse '> 为collapse之外 继承性:无 动画性:否 计算值:指定值 取值: 说明: 置或检索对象的边框背景图的扩展。
|
| border-image-repeat | 语法: border-image-repeat:[ stretch | repeat | round | space ]{1,2} 默认值:stretch 适用于:所有元素,除table元素设置了 <' border-collapse '> 为collapse之外 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象的边框图像的平铺方式。
|
轮廓
| 属性 | 值 | 描述 |
|---|---|---|
| outline | 在一个声明中设置所有的轮廓属性。 object.style.outline="#0000FF dotted thin" 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 注释:轮廓线不会占据空间,也不一定是矩形。 可以按顺序设置如下属性: outline-color outline-style outline-width none 清除所有轮廓样式。 默认值: invert none medium |
|
| outline-color | 设置轮廓的颜色。 | |
| outline-style | 设置轮廓的样式。 样式不能是 none,否则轮廓不会出现。 |
|
| outline-width | 设置轮廓的宽度。 |
颜色
| 属性 | 值 | 描述 | |
|---|---|---|---|
| color | color_name | hex_number| rgb_number| rgba | C3 hsl | C3 hsla | C3 transparent | inherit | 规定文本的前景颜色。 语法: 取值: 说明: 检索或设置对象的文本颜色。无默认值
color_name 规定颜色值为颜色名称的颜色(比如 red)。 hex_number 规定颜色值为十六进制值的颜色(比如 #ff0000)。 rgb_number 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。 Red、Green、Blue、Alpha即RGBA rgba 的前三个参数为对应的RGB值(R、G、B 取值范围0~255),最后一个参数为透明度通道(0.0 到 1.0) Hue、Saturation、Lightness、Alpha即HSLA H 取值范围0~360,0/360表示黑色、120表示绿色、240表示蓝色 S 取值范围0%~100% L 取值范围0%~100% A 取值范围0~1 transparent ,完全透明 inherit 规定应该从父元素继承颜色。 |
|
| background-color | 同上 | 规定文本或元素的背景颜色。 不能继承 | |
| color-profile | 允许使用源的颜色配置文件的默认以外的规范。 | ||
| opacity | value | inherit; 默认值:1 |
opacity 属性设置元素的不透明级别。 可继承 value 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。 inherit 应该从父元素继承 opacity 属性的值。 默认值:1 |
|
| rendering-intent | 允许使用颜色配置文件渲染意图的默认以外的规范。 |
Content for Paged Media
尺寸
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| width | CSS1 | 无 | 检索或设置对象的宽度 |
| min-width | CSS2 | 无 | 设置或检索对象的最小宽度 |
| max-width | CSS2 | 无 | 设置或检索对象的最大宽度 |
| height | CSS1 | 无 | 检索或设置对象的高度 |
| min-height | CSS2 | 无 | 设置或检索对象的最小高度 |
| max-height | CSS2 | 无 | 设置或检索对象的最大高度 |
宽度和真实占有宽度,不是一个概念!!
CSS中width指的是内容的宽度,而不是盒子的宽度。
CSS中height指的是内容的高度,而不是盒子的高度。
| 属性 | 描述 |
|---|---|
| width | 语法: width:<length> | <percentage> | auto 默认值:auto 适用于:除非置换内联元素,table-row, table-row-group之外的所有元素 继承性:无 动画性:当值为<length> | <percentage>时 计算值:指定的值 取值: 说明: 检索或设置对象的宽度。
|
| min-width | 语法: min-width:<length> | <percentage> 默认值:0 适用于:除非置换内联元素,table-row, table-row-group之外的所有元素 继承性:无 动画性:当值为<length> | <percentage>时 计算值:指定的值 取值: 说明: 设置或检索对象的最小宽度。
|
| max-width | 语法: max-width:<length> | <percentage> | none 默认值:none 适用于:除非置换内联元素,table-row, table-row-group之外的所有元素 继承性:无 动画性:当值为<length> | <percentage>时 计算值:指定的值 取值: 说明: 设置或检索对象的最大宽度。
|
| height | 语法: height:<length> | <percentage> | auto 默认值:auto 适用于:除非置换内联元素,table-column, table-column-group之外的所有元素 继承性:无 动画性:当值为<length> | <percentage>时 计算值:指定的值 取值: 说明: 检索或设置对象的高度。
|
| min-height | 语法: min-height:<length> | <percentage> 默认值:0 适用于:除非置换内联元素,table-row, table-row-group之外的所有元素 继承性:无 动画性:当值为<length> | <percentage>时 计算值:指定的值 取值: 说明: 检索或设置对象的最小高度。
|
| max-height | 语法: max-height:<length> | <percentage> | none 默认值:none 适用于:除非置换内联元素,table-row, table-row-group之外的所有元素 继承性:无 动画性:当值为<length> | <percentage>时 计算值:指定的值 取值: 说明: 检索或设置对象的最大高度。
|
可伸缩框
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| flex | CSS3 | 无 | 复合属性。设置或检索伸缩盒对象的子元素如何分配空间。 |
| flex-grow | CSS3 | 无 | 设置或检索弹性盒的扩展比率。 |
| flex-shrink | CSS3 | 无 | 设置或检索弹性盒的收缩比率 |
| flex-basis | CSS3 | 无 | 设置或检索弹性盒伸缩基准值。 |
| flex-flow | CSS3 | 无 | 复合属性。设置或检索伸缩盒对象的子元素排列方式。 |
| flex-direction | CSS3 | 无 | 设置或检索伸缩盒对象的子元素在父容器中的位置。 |
| flex-wrap | CSS3 | 无 | 设置或检索伸缩盒对象的子元素超出父容器时是否换行。 |
| align-content | CSS3 | 无 | 设置或检索弹性盒堆叠伸缩行的对齐方式。 |
| align-items | CSS3 | 无 | 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 |
| align-self | CSS3 | 无 | 设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。 |
| justify-content | CSS3 | 无 | 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 |
| order | CSS3 | 无 | 设置或检索伸缩盒对象的子元素出現的順序。 |
| 属性 | 值 | 描述 | |
|---|---|---|---|
| flex | 语法: flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '> 默认值:看各分拆属性 适用于:flex子项 继承性:无 动画性:否 计算值:看各分拆属性 取值: 说明: 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
| ||
| flex-grow | 语法: 取值: 说明: 设置或检索弹性盒的扩展比率。
| ||
| flex-shrink | 语法: 取值: 说明: 设置或检索弹性盒的收缩比率。
| ||
| flex-basis | 语法: 取值: 说明: 设置或检索弹性盒伸缩基准值。
| ||
| flex-flow | 语法: 取值: 说明: 复合属性。设置或检索弹性盒模型对象的子元素排列方式。
| ||
| flex-direction | 语法: flex-direction:row | row-reverse | column | column-reverse 默认值:row 适用于:flex容器 继承性:无 动画性:否 计算值:指定值 取值: 说明: 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列
| ||
| flex-wrap | 语法: flex-wrap:nowrap | wrap | wrap-reverse 默认值:nowrap 适用于:flex容器 继承性:无 动画性:否 计算值:指定值 取值: 说明: 该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
| ||
| align-content | 语法: align-content:flex-start | flex-end | center | space-between | space-around | stretch 默认值:stretch 适用于:多行的弹性盒模型容器 继承性:无 动画性:是 计算值:指定值 取值: 说明: 当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
| ||
| align-items | 语法: align-items:flex-start | flex-end | center | baseline | stretch 默认值:stretch 适用于:flex容器 继承性:无 动画性:是 计算值:指定值 取值: 说明: 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
| ||
| align-self | 语法: align-self:auto | flex-start | flex-end | center | baseline | stretch 默认值:auto 适用于:flex子项 继承性:无 动画性:是 计算值:如果值为「auto」,则计算值为父元素的 <' align-items '> 值,否则为指定值。 取值: 说明: 定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
| ||
| justify-content | 语法: justify-content:flex-start | flex-end | center | space-between | space-around 默认值:flex-start 适用于:flex容器 继承性:无 动画性:是 计算值:指定值 取值: 说明: 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
| ||
| order |
|
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| box-orient | CSS3 | 无 | 设置或检索伸缩盒对象的子元素的排列方式。 |
| box-pack | CSS3 | 无 | 设置或检索伸缩盒对象的子元素的对齐方式。请参阅box-align兄弟属性 |
| box-align | CSS3 | 无 | 设置或检索伸缩盒对象的子元素的对齐方式。请参阅box-pack兄弟属性 |
| box-flex | CSS3 | 无 | 设置或检索伸缩盒对象的子元素如何分配其剩余空间。 |
| box-flex-group | CSS3 | 无 | 设置或检索伸缩盒对象的子元素的所属组。 |
| box-ordinal-group | CSS3 | 无 | 设置或检索伸缩盒对象的子元素的显示顺序。 |
| box-direction | CSS3 | 无 | 设置或检索伸缩盒对象的子元素的排列顺序是否反转。 |
| box-lines | CSS3 | 无 | 设置或检索伸缩盒对象的子元素是否可以换行显示。 |
| 属性 | 值 | 描述 |
|---|---|---|
| box-align | start | end | center | baseline | stretch; 默认值: stretch |
规定如何对齐框的子元素。 object.style.boxAlign="center" start 对于正常方向的框,每个子元素的下边缘沿着框的底边放置。 对于反方向的框,每个子元素的下边缘沿着框的底边放置。 end 对于正常方向的框,每个子元素的下边缘沿着框的底边放置。 对于反方向的框,每个子元素的上边缘沿着框的顶边放置。 center 均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下。 baseline 如果 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。 stretch 拉伸子元素以填充包含块 |
| box-direction | normal | reverse | inherit; 默认值: normal |
规定框的子元素的显示方向。 object.style.boxDirection="reverse" normal 以默认方向显示子元素。 reverse 以反方向显示子元素。 inherit 应该从子元素继承 box-direction 属性的值 |
| box-flex | box-flex: value; 默认值: 0.0(指示该元素不可伸缩) |
规定框的子元素是否可伸缩。 object.style.boxFlex=2.0 value 元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。 |
| box-flex-group | 将可伸缩元素分配到柔性分组。 | |
| box-lines | single | multiple; 默认值:single |
规定当超出父元素框的空间时,是否换行显示。 object.style.boxLines="multiple" single 所有子元素会被放置在单独的行或列中。(无法匹配的元素会被视为溢出)。 multiple 允许框扩展为多行,以容纳其所有子元素。 |
| box-ordinal-group | 规定框的子元素的显示次序。 | |
| box-orient | 规定框的子元素是否应水平或垂直排列。 | |
| box-pack | 规定水平框中的水平位置或者垂直框中的垂直位置。 |
字体
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| font | CSS1/2 | 有 | 复合属性。设置或检索对象中的文本特性 |
| font-style | CSS1 | 有 | 设置或检索对象中的字体样式 |
| font-variant | CSS1 | 有 | 设置或检索对象中的文本是否为小型的大写字母 |
| font-weight | CSS1 | 有 | 设置或检索对象中的文本字体的粗细 |
| font-size | CSS1 | 有 | 设置或检索对象中的字体尺寸 |
| font-family | CSS1 | 有 | 设置或检索用于对象中文本的字体名称序列 |
| font-stretch | CSS3 | 有 | 设置或检索对象中的文字是否横向拉伸变形。 |
| font-size-adjust | CSS3 | 有 | 设置或检索小写字母x的高度与对象文字字号的比率。 |
| 属性 | 描述 |
|---|---|
| font | 语法: font:[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar 默认值:看独立属性自身 适用于:所有元素 继承性:有 动画性:看独立属性自身 计算值:看独立属性自身 取值: 说明: 设置或检索对象中的文本特性。该属性是复合属性。
|
| font-style | 语法: font-style:normal | italic | oblique 默认值:normal 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象中的文本字体样式。
|
| font-variant | 语法: font-variant:normal | small-caps 默认值:normal 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象中的文本是否为小型的大写字母。
|
| font-weight | 语法: 取值: 说明: 设置或检索对象中的文本字体的粗细。
|
| font-size | 语法: font-size:<absolute-size> | <relative-size> | <length> | <percentage> <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large <relative-size> = smaller | larger 默认值:medium 适用于:所有元素 继承性:有 动画性:是 计算值:指定值 取值: 说明: 设置或检索对象中的字体尺寸。
|
| font-family | 语法: font-family:[ <family-name> | <generic-family> ] # <family-name> = arial | georgia | verdana | helvetica | simsun and etc. <generic-family> = cursive | fantasy | monospace | serif | sans-serif 默认值:由user agent决定 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索用于对象中文本的字体名称序列。
网页中不是所有字体都能用,因为这个字体要看用户的电脑里面装没装。如果用户电脑里面没有这个字体,那么就会变成宋体。 页面中,中文我们只使用: 微软雅黑、宋体、黑体。 如果页面中,需要其他的字体,那么需要切图。 英语:Arial 、 Times New Roman font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。 在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace") Serif 字体,Sans-serif 字体,Monospace 字体,Cursive 字体,Fantasy 字体 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier") 建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。 可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif 字体。 |
| font-stretch | 语法: font-stretch:normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded 默认值:normal 适用于:所有元素 继承性:有 动画性:是 计算值:指定值 取值: 说明: 设置或检索对象中的文字是否横向拉伸变形。
|
| font-size-adjust | 语法: 取值: 说明: 设置或检索对象的 aspect 值,用以保持首选字体的 x-height。
|
内容生成
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| content | CSS2 | 无 | 用来和:after及:before伪元素一起使用,在对象前或后显示内容 |
| counter-increment | CSS2 | 无 | 设定当一个selector发生时计数器增加的值 |
| counter-reset | CSS2 | 无 | 将指定selector的计数器复位 |
| quotes | CSS2 | 有 | 设置或检索对象内使用的嵌套标记 |
| 属性 | 描述 |
|---|---|
| content | 语法: content:[ [<uri> | icon] ',' ]* [ normal | none | inhibit | <content-list> ] <content-list> = [ pending(<identifier>) | <string> | contents | footnote | endnote | section-note | list-item | <counter> | <named-string> | open-quote | close-quote | no-open-quote | no-close-quote | icon | <glyph> | <uri> | <datetime> | document-url | <target> ]+ <counter> = counter(name) | counter(name,list-style-type) | counters(name,string) | counters(name,string,list-style-type) 默认值:normal 适用于:所有元素,::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas 继承性:无 动画性:否 计算值:指定值 取值: 说明: |
| counter-incrrement | 语法: counter-increment:none | [<identifier> <integer>]+ 默认值:none 适用于:所有元素,::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设定当一个selector发生时计数器增加的值。
|
| counter-reset | 语法: counter-reset:none | [<identifier> <integer>]+ 默认值:none 适用于:所有元素,::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context 继承性:无 动画性:否 计算值:指定值 取值: 说明: 将指定selector的计数器复位。
|
| quotes | 语法: 取值: 说明: 设置或检索对象内使用的嵌套标记。
|
Grid
| 属性 | 值 | 描述 |
|---|---|---|
| grid-columns | 规定网格中每个列的宽度。 | |
| grid-rows | 规定网格中每个列的高度。 |
Hyperlink
| 属性 | 值 | 描述 |
|---|---|---|
| target | 简写属性,设置target-name、target-new以及target-position属性。 | |
| target-name | current | root | parent | new | modal | name; 默认值: current |
规定在何处打开链接(链接的目标)。 object.style.targetName="new" current 在链接所在的框架、标签页或窗口中打开超链接。 root 在当前标签页或窗口中超链接。 parent 在父框架中打开超链接。如果当前框架没有父框架,则将该值视作 root。 new 创建新的目的地 modal 在新的(暂时创建的)模态窗口中打开新窗口。 name 在已有框架、窗口或标签页中打开链接。如果 name 目的地不存在,则用该名称创建新的目的地。 |
| target-new | window | tab | none; |
规定目标链接在新窗口还是在已有窗口的新标签页中打开。 object.style.targetNew="tab" window 在新窗口中打开超链接。 tab 在已有窗口的新标签页中打开超链接。 none 不创建新的目的地。 |
| target-position | above | behind | front | back; 默认值: above |
规定在何处放置新的目标链接。 object.style.targetPosition="front" target-position 属性只有在 target-name 属性创建新标签页或新窗口时有效。 above 在当前标签页/窗口之前放置新的目的地标签页/窗口。 behind 在当前标签页/窗口之后放置新的目的地标签页/窗口。 front 在所有其他标签页/窗口之前放置新的目的地标签页/窗口。 back 在所有其他标签页/窗口之后放置新的目的地标签页/窗口。 |
列表
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| list-style | CSS1 | 有 | 复合属性。设置列表项目相关内容 |
| list-style-image | CSS1 | 有 | 设置或检索作为对象的列表项标记的图像 |
| list-style-position | CSS1 | 有 | 设置或检索作为对象的列表项标记如何根据文本排列 |
| list-style-type | CSS1/2 | 有 | 设置或检索对象的列表项所使用的预设标记 |
| 属性 | 描述 |
|---|---|
| list-style | 语法: list-style:<' list-style-type '> || <' list-style-position '> || <' list-style-image '> 默认值:看独立属性自身 适用于:所有 <' display '> 设置为 继承性:有 动画性:否 计算值:看独立属性自身 取值: 说明: 复合属性。设置列表项目相关内容
|
| list-style-image | 语法: 取值: 说明: 设置或检索作为对象的列表项标记的图像。
|
| list-style-position | 语法: list-style-position:outside | inside 默认值:outside 适用于:所有 <' display '> 设置为 继承性:有 动画性:否 计算值:特定值 取值: 说明: 设置或检索作为对象的列表项标记如何根据文本排列。
|
| list-style-type | 语法: list-style-type:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin 默认值:disc 适用于:所有 <' display '> 设置为 继承性:有 动画性:否 计算值:特定值 取值: 说明: 设置或检索对象的列表项所使用的预设标记。
|
外边距
标准文档流中,竖直方向的margin不叠加,以较大的为准。
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| margin | CSS1 | 无 | 检索或设置对象四边的外延边距 |
| margin-top | CSS1 | 无 | 检索或设置对象顶边的外延边距 |
| margin-right | CSS1 | 无 | 检索或设置对象右边的外延边距 |
| margin-bottom | CSS1 | 无 | 检索或设置对象底边的外延边距 |
| margin-left | CSS1 | 无 | 检索或设置对象左边的外延边距 |
| 属性 | 描述 |
|---|---|
| margin | 语法: margin:[ <length> | <percentage> | auto ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除非 table | inline-table | table-caption 的表格类元素之外 继承性:无 动画性:是 计算值:看每个独立属性 相关属性:[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ] 取值: 说明: 检索或设置对象四边的外延边距。
|
| margin-top | 语法: margin-top:<length> | <percentage> | auto 默认值:0 适用于:所有元素,除非 table | inline-table | table-caption 的表格类元素和非替代行内元素之外 继承性:无 动画性:是 计算值:指定的百分比、绝对长度或auto 相关属性:[ margin ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ] 取值: 说明: 检索或设置对象顶边的外延边距。
|
| margin-right | |
| margin-bottom | |
| margin-left |
Marquee
| 属性 | 值 | 描述 |
|---|---|---|
| marquee-direction | 设置移动内容的方向。 | |
| marquee-play-count | 设置内容移动多少次。 | |
| marquee-speed | 设置内容滚动得多快。 | |
| marquee-style | 设置移动内容的样式。 |
多列
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| columns | CSS3 | 无 | 设置或检索对象的列数和每列的宽度。复合属性 |
| column-width | CSS3 | 无 | 设置或检索对象每列的宽度 |
| column-count | CSS3 | 无 | 设置或检索对象的列数 |
| column-gap | CSS3 | 无 | 设置或检索对象的列与列之间的间隙 |
| column-rule | CSS3 | 无 | 设置或检索对象的列与列之间的边框。复合属性 |
| column-rule-width | CSS3 | 无 | 设置或检索对象的列与列之间的边框厚度。 |
| column-rule-style | CSS3 | 无 | 设置或检索对象的列与列之间的边框样式。 |
| column-rule-color | CSS3 | 无 | 设置或检索对象的列与列之间的边框颜色。 |
| column-span | CSS3 | 无 | 设置或检索对象元素是否横跨所有列。 |
| column-fill | CSS3 | 无 | 设置或检索对象所有列的高度是否统一。 |
| column-break-before | CSS3 | 无 | 设置或检索对象之前是否断行。 |
| column-break-after | CSS3 | 无 | 设置或检索对象之前是否断行。 |
| column-break-inside | CSS3 | 无 | 设置或检索对象内部是否断行。 |
| 属性 | 值 | 描述 |
|---|---|---|
| column-count | 规定元素应该被分隔的列数。 number 元素内容将被划分的最佳列数。 auto 由其他属性决定列数,比如 "column-width"。 语法: column-count:<integer> | auto 默认值:auto 适用于:除table外的非替换块级元素, table cells, inline-block元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象的列数
|
|
| column-fill | 规定如何填充列。 balance 对列进行协调。浏览器应对列长度的差异进行最小化处理。 auto 按顺序对列进行填充,列长度会各有不同。 语法: column-fill:auto | balance 默认值:auto 适用于:定义了多列的元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象所有列的高度是否统一。
|
|
| column-gap | 规定列之间的间隔。 语法: 取值: 说明: 设置或检索对象的列与列之间的间隙
| |
| column-rule | 设置所有 column-rule-* 属性的简写属性。 column-rule:<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '> 默认值:看每个独立属性 适用于:定义了多列的元素 继承性:无 动画性:否 计算值:看每个独立属性 取值: 说明: 设置或检索对象的列与列之间的边框。复合属性。参阅 <' border '> 属性
|
|
| column-rule-color | 规定列之间规则的颜色。 语法: 取值: 说明: 设置或检索对象的列与列之间的边框颜色。参阅 <' border-color '> 属性
|
|
| column-rule-style | 规定列之间规则的样式。 语法: column-rule-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 默认值:none 适用于:定义了多列的元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象的列与列之间的边框样式。参阅 <' border-style '> 属性
|
|
| column-rule-width | 规定列之间规则的宽度。 column-rule-width:<length> | thin | medium | thick 默认值:medium 适用于:定义了多列的元素 继承性:无 动画性:否 计算值:绝对长度值或者0(如果 <' column-rule-style '> 为 none 或者 hidden) 取值: 说明: 设置或检索对象的列与列之间的边框厚度。参阅 <' border-width '> 属性
|
|
| column-span | 规定元素应该横跨的列数。 语法: column-span:none | all 默认值:none 适用于:除浮动和绝对定位之外的块级元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象元素是否横跨所有列。
|
|
| column-width | 规定列的宽度。 取值: 说明: 设置或检索对象每列的宽度
|
|
| columns | 规定设置 column-width 和 column-count 的简写属性。 取值: 说明: 设置或检索对象的列数和每列的宽度。复合属性
| |
| column-break-before | 语法: column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column 默认值:auto 适用于:块级元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象之前是否断行。
| |
| column-break-after | 语法: column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column 默认值:auto 适用于:块级元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象之后是否断行。
| |
| column-break-inside | 语法: column-break-inside:auto | avoid | avoid-page | avoid-column 默认值:auto 适用于:块级元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象内部是否断行。
|
内边距
| 属性 | 版本 | 继承性 | 简介 |
|---|---|---|---|
| padding | CSS1 | 无 | 检索或设置对象四边的内部边距 |
| padding-top | CSS1 | 无 | 检索或设置对象顶边的内部边距 |
| padding-right | CSS1 | 无 | 检索或设置对象右边的内部边距 |
| padding-bottom | CSS1 | 无 | 检索或设置对象底边的内部边距 |
| padding-left | CSS1 | 无 | 检索或设置对象左边的内部边距 |
| 属性 | 描述 |
|---|---|
| padding | 语法: padding:[ <length> | <percentage> ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外 继承性:无 动画性:是 计算值:看每个独立属性 相关属性:[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ] 取值: 说明: 检索或设置对象四边的内部边距。
|
| padding-top | 语法: padding-top:<length> | <percentage> 默认值:0 适用于:所有元素,除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外 继承性:无 动画性:是 计算值:<length> 相关属性:[ padding ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ] 取值: 说明: 检索或设置对象顶边的内补白。
|
| padding-right | |
| padding-bottom | |
| padding-left |
Paged Media
| 属性 | 值 | 描述 |
|---|---|---|
| fit | 示意如何对width和height属性均不是auto的被替换元素进行缩放。 | |
| fit-position | 定义盒内对象的对齐方式。 | |
| image-orientation | 规定用户代理应用于图像的顺时针方向旋转。 | |
| page | 规定元素应该被显示的页面特定类型。 | |
| size | 规定页面内容包含框的尺寸和方向。 |
定位
一切皆为框
| 属性 | 描述 |
|---|---|
| position | 规定元素的定位类型。 语法: position:static | relative | absolute | fixed | center | page | sticky 默认值:static 适用于:除display属性定义为 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: |
| z-index | 语法: 取值: 说明: 检索或设置对象的层叠顺序。
|
| top | 语法: top: auto | <length> | <percentage> 默认值:auto 适用于:定位元素。即定义了position为 继承性:无 动画性:当值为<length> | <percentage>时 计算值:当position为 媒体:视觉 取值: 说明: 检索或设置对象参照相对物顶边界向下偏移位置。
|
| right | 检索或设置对象参照相对物右边界向左偏移位置。 |
| bottom | 检索或设置对象参照相对物底边界向上偏移位置。 |
| left | 检索或设置对象参照相对物左边界向右偏移位置。 |
| clip | 语法: 取值: 说明: |
| 属性 | 值 | 描述 |
|---|---|---|
| 其包含块下边界之间的偏移。 | ||
| clear | left | right | both | none |
规定元素的哪一侧不允许其他浮动元素。 |
| cursor | url | default | auto | crosshair | pointer | move | (e|w|s|n| ne|nw|se|sw)-resize | text | wait | help 默认值:auto |
规定要显示的光标的类型(形状)。 object.style.cursor="crosshair" 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。 可能的值: url 需使用的自定义光标的 URL。(注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。) default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针(一只手) move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被向右(东)移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 n-resize 此光标指示矩形框的边缘可被向上(北)移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 s-resize 此光标指示矩形框的边缘可被向下移动(南)。 w-resize 此光标指示矩形框的边缘可被向左移动(西)。 text 此光标指示文本。 wait 此光标指示程序正忙(通常是一只表或沙漏)。 help 此光标指示可用的帮助(通常是一个问号或一个气球)。 |
| display | block | inline | none | inherit 默认值: inline 不继承 |
规定建立布局时元素应该生成的框的类型。 object.style.display="inline" none 此元素不会被显示。不占用文档中的空间。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inherit 规定应该从父元素继承 display 属性的值。 |
| float | left | right | none 默认值:none |
规定框是否应该浮动。 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。 |
| overflow | hidden | 规定当内容溢出元素框时发生的事情。 |
| vertical-align | 默认值:baseline 不继承 |
设置元素的垂直对齐方式。 object.style.verticalAlign="bottom" 可能的值: 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。 |
| visibility | visible | hidden | collapse| inherit 默认值:visible |
规定是否显示一个元素生成的元素框。元素仍占据其原来的空间,不过可以完全不可见。 object.style.visibility="hidden" 可能的值: visible 默认值。元素是可见的。 hidden 元素是不可见的。但元素仍占据其原来的空间。 collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 inherit 规定应该从父元素继承 visibility 属性的值。 提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。 |
| z-index | number 默认值:0 |
设置元素的堆叠顺序。 只有定位了的元素,才能有z-index值。即,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的东西不能用。 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁能压住别人。定位了的元素,永远能够压住没有定位的元素。 从父现象:若父亲的z-index值小,儿子再牛逼也没用。 |
打印
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| page | CSS3 | 无 | 检索或指定显示对象容器时使用的页面类型。 |
| page-break-before | CSS2 | 无 | 检索或设置对象之前出现的页分割符。 |
| page-break-after | CSS2 | 无 | 检索或设置对象之后出现的页分割符。 |
| page-break-inside | CSS2 | 无 | 检索或设置对象容器内部出现的页分割符。 |
| 属性 | 描述 |
|---|---|
| page | 语法: 取值: 说明: 检索或指定显示对象容器时使用的页面类型。参阅@page
|
| page-break-before | 语法: page-break-before:auto | always | avoid | left | right 默认值:auto 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 媒体:页面 取值: 说明: 检索或设置对象之前出现的页分割符。
|
| page-break-after | 语法: page-break-after:auto | always | avoid | left | right 默认值:auto 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 媒体:页面 取值: 说明: 检索或设置对象之后出现的页分割符。
|
| page-break-inside | 语法: page-break-inside:auto | avoid 默认值:auto 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 媒体:页面 取值: 说明: 检索或设置对象容器内部出现的页分割符。
|
表格
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| table-layout | CSS2 | 无 | 设置或检索表格的布局算法 |
| border-collapse | CSS2 | 有 | 设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开 |
| border-spacing | CSS2 | 有 | 设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距 |
| caption-side | CSS2 | 有 | 设置或检索表格的caption对象是在表格的那一边 |
| empty-cells | CSS2 | 有 | 设置或检索当表格的单元格无内容时,是否显示该单元格的边框 |
| 属性 | 描述 |
|---|---|
| table-layout | 语法: table-layout:auto | fixed 默认值:auto 适用于:table系元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索表格的布局算法。
|
| border-collapse | 语法: border-collapse:separate | collapse 默认值:separate 适用于:table系元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索表格的行和单元格的边是合并还是独立。
|
| border-spacing | 语法: 取值: 说明: 设置或检索当表格边框独立时,行和单元格的边框在横向和纵向上的间距
|
| caption-side | 语法: caption-side:top | bottom 默认值:top 适用于:table系元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索表格的caption对象是在表格的那一边。
|
| empty-cells | 语法: empty-cells:hide | show 默认值:show 适用于:table系元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索当表格的单元格无内容时,是否显示该单元格的边框。
|
文本
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| text-transform | CSS1/3 | 有 | 检索或设置对象中的文本的大小写 |
| white-space | CSS1 | 有 | 设置或检索对象内空格的处理方式 |
| tab-size | CSS3 | 有 | 检索或设置对象中的制表符的长度 |
| word-wrap | CSS3 | 有 | 设置或检索当内容超过指定容器的边界时是否断行 |
| overflow-wrap | CSS3 | 有 | 设置或检索当内容超过指定容器的边界时是否断行 |
| word-break | CSS3 | 有 | 设置或检索对象内文本的字内换行行为 |
| text-align | CSS1/3 | 有 | 设置或检索对象中内容的水平对齐方式 |
| text-align-last | CSS3 | 有 | 设置或检索一个块内的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)或者被强制打断的行的对齐方式 |
| text-justify | CSS3 | 有 | 设置或检索对象内调整文本使用的对齐方式 |
| word-spacing | CSS1/3 | 有 | 检索或设置对象中的单词之间的最小,最大和最佳间隙 |
| letter-spacing | CSS1/3 | 有 | 检索或设置对象中的字符之间的最小,最大和最佳间隙 |
| text-indent | CSS1/3 | 有 | 检索或设置对象中的文本的缩进 |
| vertical-align | CSS1/2 | 无 | 设置或检索对象内容的垂直对其方式 |
| line-height | CSS1 | 有 | 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离 |
| text-size-adjust | CSS3 | 有 | 检索或设置移动端页面中对象文本的大小调整 |
| 属性 | 描述 |
|---|---|
| text-transform | 语法: text-transform:none | capitalize | uppercase | lowercase | full-width 默认值:none 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 检索或设置对象中的文本的大小写。
|
| white-space | 语法: white-space:normal | pre | nowrap | pre-wrap | pre-line 默认值:normal 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象内空格的处理方式。
|
| tab-size | 语法: 取值: 说明: 检索或设置对象中的制表符的长度。
|
| word-wrap | 语法: word-wrap:normal | break-word 默认值:normal 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 相关属性:<' overflow-wrap '> || <' word-break '> 取值: 说明: 设置或检索当内容超过指定容器的边界时是否断行。
|
| overflow-wrap | 语法: overflow-wrap:normal | break-word 默认值:normal 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 相关属性:<' word-wrap '> || <' word-break '> 取值: 说明: |
| word-break | 语法: 取值: 说明: 设置或检索对象内文本的字内换行行为。
|
| text-align | 语法: text-align:start | end | left | right | center | justify | match-parent | 默认值:start 适用于:块容器 继承性:有 动画性:否 计算值:指定值,除 match-parent 值外 取值: 说明: 设置或检索对象中内容的水平对齐方式。
|
| text-align-last | 语法: text-align-last:auto | start | end | left | right | center | justify 默认值:auto 适用于:块容器 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索一个块内的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)或者被强制打断的行的对齐方式
|
| text-justify | 语法: text-justify:auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida 默认值:auto 适用于:块容器及某些内联元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象内调整文本使用的对齐方式。
|
| word-spacing | 语法: word-spacing:normal | <length> | <percentage> 默认值:normal 适用于:所有元素 继承性:有 动画性:非normal值时 计算值:指定值 相关属性:<' letter-spacing '> 取值: 说明: 检索或设置对象中的单词之间的最小,最大和最佳间隙。
|
| letter-spacing | 语法: letter-spacing:normal | <length> | <percentage> 默认值:normal 适用于:所有元素 继承性:有 动画性:非normal值时 计算值:指定值 相关属性:<' word-spacing '> 取值: 说明: 检索或设置对象中的字符之间的最小,最大和最佳间隙。
|
| text-indent | 语法: text-indent:[ <length> | <percentage> ] && hanging? && each-line? 默认值:0 适用于:块容器 继承性:有 动画性:当使用值为非关键字时 计算值:指定值 取值: 说明: 检索或设置对象中的文本的缩进。
|
| vertical-align | 语法: vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> 默认值:baseline 适用于:内联及 table-cell 元素 继承性:无 动画性:当值为 <length> 时 计算值:指定值 取值: 说明: 设置或检索内联元素在行框内的垂直对其方式。
|
| line-height | 语法: 取值: 说明: 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
|
| text-size-adjust | 语法: 取值: 说明: 检索或设置移动端页面中对象文本的大小调整。
|
文本装饰
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| text-decoration | CSS1/3 | 无 | 复合属性。检索或设置对象中的文本的装饰。 |
| text-decoration-line | CSS3 | 无 | 检索或设置对象中的文本装饰线条的位置。 |
| text-decoration-color | CSS3 | 无 | 检索或设置对象中的文本装饰线条的颜色。 |
| text-decoration-style | CSS3 | 无 | 检索或设置对象中的文本装饰线条的形状。 |
| text-decoration-skip | CSS3 | 有 | 检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。 |
| text-underline-position | CSS3 | 有 | 检索或设置对象中的下划线的位置。 |
| text-shadow | CSS3 | 有 | 设置或检索对象中文本的文字是否有阴影及模糊效果 |
| title | title |
|---|---|
| text-decoration | 语法: text-decoration:<' text-decoration-line '> || <' text-decoration-style '> || <' text-decoration-color '> 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:看每个独立属性 计算值:看每个独立属性 相关属性:<' text-decoration-skip '> || <' text-underline-position '> 取值: 说明: 复合属性。检索或设置对象中的文本的装饰。
|
| text-decoration-line | 语法: text-decoration-line:none | [ underline || overline || line-through || blink ] 默认值:none 适用于:所有元素 继承性:无 动画性:否 计算值:指定的值 取值: 说明: 检索或设置对象中的文本装饰线条的位置。
|
| text-decoration-color | 语法: 取值: 说明: 检索或设置对象中的文本装饰线条的颜色。
|
| text-decoration-style | 语法: text-decoration-style:solid | double | dotted | dashed | wavy 默认值:solid 适用于:所有元素 继承性:无 动画性:否 计算值:指定的值 取值: 说明: 检索或设置对象中的文本装饰线条的形状。
|
| text-decoration-skip | 语法: text-decoration-skip:none | [ objects || spaces || ink || edges || box-decoration ] 默认值:objects 适用于:所有元素 继承性:是 动画性:否 计算值:指定的值 取值: 说明: 检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。
|
| text-underline-position | 语法: text-underline-position:auto | [ under || [ left | right ] ] 默认值:auto 适用于:所有元素 继承性:是 动画性:否 计算值:特定值 取值: 说明: 检检索或设置对象中的下划线的位置。
|
| text-shadow | 语法: 取值: 说明: 设置或检索对象中文本的文字是否有阴影及模糊效果。参阅 <' box-shadow '> 属性。 |
书写模式
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| direction | CSS2 | 有 | 检索或设置文本流的方向 |
| unicode-bidi | CSS2 | 无 | 用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用 |
| writing-mode | CSS3 | 有 | 设置或检索对象的内容块固有的书写方向 |
| 属性 | 描述 |
|---|---|
| direction | 语法: direction:ltr | rtl 默认值:ltr 适用于:所有元素 继承性:有 动画性:否 计算值:特定值 取值: 说明: 检索或设置文本流的方向。
|
| unicode-bidi | 语法: unicode-bidi:normal | embed | bidi-override | isolate| isolate-override | plaintext 默认值:normal 适用于:所有元素 继承性:无 动画性:否 计算值:特定值 取值: 说明: 用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用
|
| writing-mode | 语法: writing-mode:horizontal-tb | vertical-rl | vertical-lr | 默认值:normal 适用于:除 <' display '> 属性定义为 继承性:有 动画性:否 计算值:特定值 取值: 说明: 设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式,但是亚洲语言 lr-tb | tb-rl 的书写方式都有。
|
2D/3D 转换
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| transform | CSS3 | 无 | 检索或设置对象的变换 |
| transform-origin | CSS3 | 无 | 检索或设置对象中的变换所参照的原点 |
| transform-style | CSS3 | 无 | 指定某元素的子元素是否位于三维空间内 |
| perspective | CSS3 | 无 | 指定观察者与「z=0」平面的距离 |
| perspective-origin | CSS3 | 无 | 指定透视点的位置 |
| backface-visibility | CSS3 | 无 | 指定元素背面面向用户时是否可见 |
| 属性 | 描述 |
|---|---|
| transform | 语法: transform:none | <transform-function>+ transform-function list: matrix() = matrix(<number>[,<number>]{5,5}) matrix3d() = matrix3d(<number>[,<number>]{15,15}) translate() = translate(<translation-value>[,<translation-value>]?) translate3d() = translate3d(<translation-value>,<translation-value>,<length>) translatex() = translatex(<translation-value>) translatey() = translatey(<translation-value>) translatez() = translatez(<length>) rotate() = rotate(<angle>) rotate3d() = rotate3d(<number>,<number>,<number>,<angle>) rotatex() = rotatex(<angle>) rotatey() = rotatey(<angle>) rotatez() = rotatez(<angle>) scale() = scale(<number>[,<number>]?) scale3d() = scale3d(<number>,<number>,<number>) scalex() = scalex(<number>) scaley() = scaley(<number>) scalez() = scalez(<number>) skew() = skew(<angle>[,<angle>]?) skewx() = skewx(<angle>) skewy() = skewy(<angle>) perspective() = perspective(<length>) <translation-value> = <length> | <percentage> 默认值:none 适用于:所有块级元素及某些内联元素 继承性:无 动画性:是 计算值:指定值,但相对长度会转换为绝对长度 媒体:视觉 取值: 2D Transform Functions: 3D Transform Functions: 说明: 设置或检索对象的转换。
|
| transform-origin | 语法: transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]? 默认值:50% 50%,效果等同于center center 适用于:所有块级元素及某些内联元素 继承性:无 动画性:当值为数值时 计算值:除了指定绝对值,否则都为百分比 媒体:视觉 取值: 说明: 设置或检索对象以某个原点进行转换。
|
| transform-style | 语法: transform-style:flat | preserve-3d 默认值:flat 适用于:变换元素 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: 指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化。
|
| perspective | 语法: 取值: 说明: 指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大,而「z<0」时则比正常小,大小程度由该属性的值决定。
|
| perspective-origin | 语法: perspective-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]? 默认值:50% 50%,效果等同于center center 适用于:变换元素 继承性:无 动画性:当值为数值时 计算值:除了指定绝对值,否则都为百分比 媒体:视觉 取值: 说明: 指定透视点的位置。
|
| backface-visibility | 语法: backface-visibility:visible | hidden 默认值:visible 适用于:变换元素 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: 指定元素背面面向用户时是否可见。
|
渐变
| 属性 | 值 | 描述 |
|---|---|---|
| background-image | linear-gradient( [ [ <shape> || <size> ] [ at <position>, ]? <color-stop> [, <color-stop> ]+ ) | 线性渐变 |
| background-image | radial-gradient( [ [ <shape> || <size> ] [ at <position>, ]? <color-stop> [, <color-stop> ]+ ) | 径向渐变:从一个中心点开始沿着四周产生渐变效果。 <shape> = circle | ellipse <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ] <position> = [<length> | <percentage> | left | center | right ]? [ <length> | <percentage> | top | center | bottom ]? <color-stop> = <color> [ <length> | <percentage> ]? <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner <circle-size> = <length> <ellipse-size> = [ <length> | <>percentage ]{2} <position> 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个参数,第二个值默认为50%,即center。 <length> 用长度值指定径向渐变圆心的纵坐标值,可以为负值。|| 用长度指定起止色位置,不允许负值。 <percentage> 用百分比指定径向渐变圆心的横(或者纵)坐标值,可以为负值。|| 用百分比指定起止色位置,不允许负值。 <color-stop> 用于指定渐变的起止颜色: <color> 指定颜色。 <length> || <percentage> 指定起止位置。 <shape> 确定圆的类型: circle:指定圆形的径向渐变。 ellipse:指向椭圆形的径向渐变。 <extent-keyword> circle | ellipse 都接受该值作为 size: closest-size:指定径向渐变的半径长度为从圆心到离圆心最近 的边。 closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近 的角。 farthest-size:指定径向渐变的半径长度为从圆心到离圆心最远 的边。 farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远 的边。 <circle-size> circle 接受该值作为 size: 用长度值指定正圆径向渐变的半径长度,不允许负值。 <ellipse-size> ellipse 接受该值作为 size 用长度值指定椭圆径向渐变的长半径或短半径,不允许负值。 left:设置左边为径向渐变圆心的横坐标值。 center:设置中间为径向渐变圆心的横坐标值。 right:设置右边为径向渐变圆心的横坐标值。 top:设置顶部为径向渐变圆心的纵坐标值。 center:设置中间为径向渐变圆心的纵坐标值。 bottom:设置底部为径向渐变圆心的纵坐标值。 |
| data | repeating-linear-gradient() | 重复线性渐变。 |
| data | repeating-radial-gradient() | 重复径向渐变。 |
| data | data | data |
| data | data | data |
| data | data | data |
| data | data | data |
| data | data | data |
| data | data | data |
| title | title |
|---|
过渡
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| transition | CSS3 | 无 | 复合属性。检索或设置对象变换时的过渡效果 |
| transition-property | CSS3 | 无 | 检索或设置对象中的参与过渡的属性 |
| transition-duration | CSS3 | 无 | 检索或设置对象过渡的持续时间 |
| transition-timing-function | CSS3 | 无 | 检索或设置对象中过渡的类型 |
| transition-delay | CSS3 | 无 | 检索或设置对象延迟过渡的时间 |
| 属性 | 值 | 描述 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| transition | 语法: transition:<single-transition>[,<single-transition>]* <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time> 默认值:看每个独立属性 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:看每个独立属性 媒体:交互 取值: 说明: 复合属性。检索或设置对象变换时的过渡。
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition-property | 语法: transition-property:none | <single-transition-property>[ ,<single-transition-property> ]* <single-transition-property> = all | <IDENT> 默认值:all 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:指定值 媒体:视觉 取值: 说明: 检索或设置对象中的参与过渡的属性。
有过渡效果的属性:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition-duration | 语法: 取值: 说明: 检索或设置对象过渡的持续时间。
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition-timing-function | 语法: transition-timing-function:<single-transition-timing-function>[,<single-transition-timing-function>]* <single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) 默认值:ease 适用于:所有元素,包含伪对象:after和:before 继承性:无 动画性:否 计算值:指定值 媒体:交互 取值: 说明: 检索或设置对象中过渡的动画类型。
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition-delay | 语法: 取值: 说明: 检索或设置对象延迟过渡的时间。
|
媒体查询
语法:
<media_query_list>:[<media_query>[',' <media_query>]*]?
<media_query>:[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
<expression>:'('<media_feature>[:<value>]?')'
说明:
- 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
- 媒体查询的大部分媒体特性都接受
min和max用于表达“大于或等于”和“小与或等于”。如:width会有min-width和max-width 媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。
示例代码:
媒体特性 Media Features
| 媒体特性 | 取值 | 接受min/max | 描述 |
|---|---|---|---|
| width | <length> | yes | 定义输出设备中的页面可见区域宽度 |
| height | <length> | yes | 定义输出设备中的页面可见区域高度 |
| device-width | <length> | yes | 定义输出设备的屏幕可见宽度 |
| device-height | <length> | yes | 定义输出设备的屏幕可见高度 |
| orientation | portrait | landscape | no | 定义'height'是否大于或等于'width'。值portrait代表是,landscape代表否 |
| aspect-ratio | <ratio> | yes | 定义'width'与'height'的比率 |
| device-aspect-ratio | <ratio> | yes | 定义'device-width'与'device-height'的比率。如常见的显示器比率:4/3, 16/9, 16/10 |
| color | <integer> | yes | 定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0 |
| color-index | <integer> | yes | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
| monochrome | <integer> | yes | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
| resolution | <resolution> | yes | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
| scan | progressive | interlace | no | 定义电视类设备的扫描工序 |
| grid | <integer> | no | 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否 |
| 属性 | 描述 |
|---|---|
| width | 语法: width:<length> 接受min/max前缀:是 取值: 说明: |
| height | 语法: height:<length> 取值: 说明: 定义输出设备中的页面可见区域高度。
|
| device-width | 语法: device-width:<length> 取值: 说明: 定义输出设备的屏幕可见宽度。
|
| device-height | 语法: device-height:<length> 取值: 说明: 定义输出设备的屏幕可见高度。
|
| orientation | 语法: orientation:portrait | landscape 接受min/max前缀:是 取值: 说明: 定义输出设备中的页面可见区域高度是否大于或等于宽度。
|
| aspect-ratio | 语法: aspect-ratio:<ratio> 取值: 说明: 定义输出设备中的页面可见区域宽度与高度的比率。
|
| device-aspect-ratio | 语法: device-aspect-ratio:<ratio> 取值: 说明: 定义输出设备的屏幕可见宽度与高度的比率。
|
| color | 语法: color:<integer> 取值: 说明: |
| color-index | 语法: color-index:<integer> 取值: 说明: 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
|
| monochrome | 语法: monochrome:<integer> 接受min/max前缀:是 取值: 说明: 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
|
| resolution | 语法: resolution:<resolution> 取值: 说明: 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
|
| scan | 语法: scan:progressive | interlace 取值: 说明: 定义电视类设备的扫描工序。
|
| grid | 语法: grid:<integer> 取值: 说明: 用来查询输出设备是否使用栅格或点阵。
|
用户界面
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| appearance | CSS3 | 无 | 设置或检索外观按照本地默认样式 |
| text-overflow | CSS3 | 无 | 当块容器overflow为非visible时,定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符 |
| outline | CSS2 | 无 | 复合属性。设置或检索对象外的线条轮廓 |
| outline-width | CSS2 | 无 | 设置或检索对象外的线条轮廓的宽度 |
| outline-style | CSS2 | 无 | 设置或检索对象外的线条轮廓的样式 |
| outline-color | CSS2 | 无 | 设置或检索对象外的线条轮廓的颜色 |
| outline-offset | CSS3 | 无 | 设置或检索对象外的线条轮廓偏移位置的数值 |
| nav-index | CSS3 | 无 | 设置或检索对象的导航顺序。 |
| nav-up | CSS3 | 无 | 设置或检索对象的导航方向。 |
| nav-right | CSS3 | 无 | 设置或检索对象的导航方向。 |
| nav-down | CSS3 | 无 | 设置或检索对象的导航方向。 |
| nav-left | CSS3 | 无 | 设置或检索对象的导航方向。 |
| cursor | CSS2 | 有 | 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 |
| zoom | CSS3 | 有 | 设置或检索对象的缩放比例。 |
| box-sizing | CSS3 | 无 | 设置或检索对象的盒模型组成模式。 |
| resize | CSS3 | 无 | 设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。 |
| ime-mode | CSS3 | 无 | 设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。 |
| user-select | CSS3 | 无 | 设置或检索是否允许用户选中文本。 |
| pointer-events | CSS3 | 有 | 设置或检索在何时成为属性事件的target。 |
| 属性 | 描述 |
|---|---|
| appearance | 语法: appearance:none | button | button-bevel ... 默认值:none 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索外观按照本地默认样式
|
| text-overflow | 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:块级容器元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 当块容器 <' overflow '> 为 非visible时,定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符
|
| outline | 语法: outline:<' outline-width '> || <' outline-style '> || <'outline-color '> 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:看每个独立属性 计算值:看每个独立属性 相关属性: <' outline-offset '> 取值: 说明: 复合属性。设置或检索对象外的线条轮廓。outline画在 <' border'> 外面
|
| outline-width | 语法: outline-width:<length> | thin | medium | thick 默认值:medium 适用于:所有元素 继承性:无 动画性:当取值为<length>时 计算值:绝对长度;如果 <' outline-style '> 的值为 取值: 说明: 设置或检索对象外的线条轮廓的宽度。参阅 <' outline '> 属性。
|
| outline-color | 语法: 取值: 说明: 设置或检索对象外的线条轮廓的颜色。参阅 <' outline '> 属性。
|
| outline-style | 语法: outline-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset 默认值:none 适用于:所有元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象外的线条轮廓的样式。参阅 <' outline '> 属性。
|
| outline-offset | 语法: 取值: 说明: 设置或检索对象外的线条轮廓偏移容器的值。参阅 <' outline '> 属性。
|
| nav-index | 语法: 取值: 说明: 设置或检索对象的导航顺序。
|
| nav-up | 语法: 取值: 说明: 设置或检索对象的导航方向。
|
| nav-right | 语法: 取值: 说明: 设置或检索对象的导航方向。
|
| nav-down | 语法: 取值: 说明: 设置或检索对象的导航方向。
|
| nav-left | 语法: 取值: 说明: 设置或检索对象的导航方向。
|
| cursor | 语法: cursor:[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing] 默认值:auto 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 取值: 其他待完成... 说明: 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
|
| zoom | 语法: 取值: 说明: 设置或检索对象的缩放比例。
|
| box-sizing | 语法: 取值: 说明: 设置或检索对象的盒模型组成模式。
|
| resize | 语法: resize:none | both | horizontal | vertical 默认值:none 适用于:所有 <' overflow '> 设置为 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。
|
| ime-mode | 语法: ime-mode:auto | normal | active | inactive | disabled 默认值:auto 适用于:所有输入文本框 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。
|
| user-select | 语法: user-select:none | text | all | element 默认值:text 适用于:除替换元素外的所有元素 继承性:无 动画性:否 计算值:指定值 取值: 说明: 设置或检索是否允许用户选中文本。
|
| pointer-events | 语法: pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all 默认值:auto 适用于:所有元素 继承性:有 动画性:否 计算值:指定值 取值: 说明: 设置或检索在何时成为属性事件的target。
|
附录
颜色关键字(Color Keywords)
16个基本颜色关键字 Basic color keywords
| Color | Color Name | HEX | RGB |
|---|---|---|---|
| black | #000000 | 0,0,0 | |
| silver | #C0C0C0 | 192,192,192 | |
| gray | #808080 | 128,128,128 | |
| white | #FFFFFF | 255,255,255 | |
| maroon | #800000 | 128,0,0 | |
| red | #FF0000 | 255,0,0 | |
| purple | #800080 | 128,0,128 | |
| fuchsia | #FF00FF | 255,0,255 | |
| green | #008000 | 0,128,0 | |
| lime | #00FF00 | 0,255,0 | |
| olive | #808000 | 128,128,0 | |
| yellow | #FFFF00 | 255,255,0 | |
| navy | #000080 | 0,0,128 | |
| blue | #0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| aqua | #00FFFF | 0,255,255 |
示例代码:
28个系统颜色 CSS system colors
| Color | Color Name |
|---|---|
| activeborder | |
| activecaption | |
| appworkspace | |
| background | |
| buttonface | |
| buttonhighlight | |
| buttonshadow | |
| buttontext | |
| captiontext | |
| graytext | |
| highlight | |
| highlighttext | |
| inactiveborder | |
| inactivecaption | |
| inactivecaptiontext | |
| infobackground | |
| infotext | |
| menu | |
| menutext | |
| scrollbar | |
| threeddarkshadow | |
| threedface | |
| threedhighlight | |
| threedlightshadow | |
| threedshadow | |
| window | |
| windowframe | |
| windowtext |
示例代码:
CSS系统颜色在CSS3中已经不被建议使用了。尽可能的使用其它的方式来模拟系统色的色彩。
拓展颜色关键字 Extended color keywords
| Color | Color Name | HEX | RGB |
|---|---|---|---|
| aliceblue | #f0f8ff | 240,248,255 | |
| antiquewhite | #faebd7 | 250,235,215 | |
| aqua | #00ffff | 0,255,255 | |
| aquamarine | #7fffd4 | 127,255,212 | |
| azure | #f0ffff | 240,255,255 | |
| beige | #f5f5dc | 245,245,220 | |
| bisque | #ffe4c4 | 255,228,196 | |
| black | #000000 | 0,0,0 | |
| blanchedalmond | #ffebcd | 255,235,205 | |
| blue | #0000ff | 0,0,255 | |
| blueviolet | #8a2be2 | 138,43,226 | |
| brown | #a52a2a | 165,42,42 | |
| burlywood | #deb887 | 222,184,135 | |
| cadetblue | #5f9ea0 | 95,158,160 | |
| chartreuse | #7fff00 | 127,255,0 | |
| chocolate | #d2691e | 210,105,30 | |
| coral | #ff7f50 | 255,127,80 | |
| cornflowerblue | #6495ed | 100,149,237 | |
| cornsilk | #fff8dc | 255,248,220 | |
| crimson | #dc143c | 220,20,60 | |
| cyan | #00ffff | 0,255,255 | |
| darkblue | #00008b | 0,0,139 | |
| darkcyan | #008b8b | 0,139,139 | |
| darkgoldenrod | #b8860b | 184,134,11 | |
| darkgray | #a9a9a9 | 169,169,169 | |
| darkgreen | #006400 | 0,100,0 | |
| darkgrey | #a9a9a9 | 169,169,169 | |
| darkkhaki | #bdb76b | 189,183,107 | |
| darkmagenta | #8b008b | 139,0,139 | |
| darkolivegreen | #556b2f | 85,107,47 | |
| darkorange | #ff8c00 | 255,140,0 | |
| darkorchid | #9932cc | 153,50,204 | |
| darkred | #8b0000 | 139,0,0 | |
| darksalmon | #e9967a | 233,150,122 | |
| darkseagreen | #8fbc8f | 143,188,143 | |
| darkslateblue | #483d8b | 72,61,139 | |
| darkslategray | #2f4f4f | 47,79,79 | |
| darkslategrey | #2f4f4f | 47,79,79 | |
| darkturquoise | #00ced1 | 0,206,209 | |
| darkviolet | #9400d3 | 148,0,211 | |
| deeppink | #ff1493 | 255,20,147 | |
| deepskyblue | #00bfff | 0,191,255 | |
| dimgray | #696969 | 105,105,105 | |
| dimgrey | #696969 | 105,105,105 | |
| dodgerblue | #1e90ff | 30,144,255 | |
| firebrick | #b22222 | 178,34,34 | |
| floralwhite | #fffaf0 | 255,250,240 | |
| forestgreen | #228b22 | 34,139,34 | |
| fuchsia | #ff00ff | 255,0,255 | |
| gainsboro | #dcdcdc | 220,220,220 | |
| ghostwhite | #f8f8ff | 248,248,255 | |
| gold | #ffd700 | 255,215,0 | |
| goldenrod | #daa520 | 218,165,32 | |
| gray | #808080 | 128,128,128 | |
| green | #008000 | 0,128,0 | |
| greenyellow | #adff2f | 173,255,47 | |
| grey | #808080 | 128,128,128 | |
| honeydew | #f0fff0 | 240,255,240 | |
| hotpink | #ff69b4 | 255,105,180 | |
| indianred | #cd5c5c | 205,92,92 | |
| indigo | #4b0082 | 75,0,130 | |
| ivory | #fffff0 | 255,255,240 | |
| khaki | #f0e68c | 240,230,140 | |
| lavender | #e6e6fa | 230,230,250 | |
| lavenderblush | #fff0f5 | 255,240,245 | |
| lawngreen | #7cfc00 | 124,252,0 | |
| lemonchiffon | #fffacd | 255,250,205 | |
| lightblue | #add8e6 | 173,216,230 | |
| lightcoral | #f08080 | 240,128,128 | |
| lightcyan | #e0ffff | 224,255,255 | |
| lightgoldenrodyellow | #fafad2 | 250,250,210 | |
| lightgray | #d3d3d3 | 211,211,211 | |
| lightgreen | #90ee90 | 144,238,144 | |
| lightgrey | #d3d3d3 | 211,211,211 | |
| lightpink | #ffb6c1 | 255,182,193 | |
| lightsalmon | #ffa07a | 255,160,122 | |
| lightseagreen | #20b2aa | 32,178,170 | |
| lightskyblue | #87cefa | 135,206,250 | |
| lightslategray | #778899 | 119,136,153 | |
| lightslategrey | #778899 | 119,136,153 | |
| lightsteelblue | #b0c4de | 176,196,222 | |
| lightyellow | #ffffe0 | 255,255,224 | |
| lime | #00ff00 | 0,255,0 | |
| limegreen | #32cd32 | 50,205,50 | |
| linen | #faf0e6 | 250,240,230 | |
| magenta | #ff00ff | 255,0,255 | |
| maroon | #800000 | 128,0,0 | |
| mediumaquamarine | #66cdaa | 102,205,170 | |
| mediumblue | #0000cd | 0,0,205 | |
| mediumorchid | #ba55d3 | 186,85,211 | |
| mediumpurple | #9370db | 147,112,219 | |
| mediumseagreen | #3cb371 | 60,179,113 | |
| mediumslateblue | #7b68ee | 123,104,238 | |
| mediumspringgreen | #00fa9a | 0,250,154 | |
| mediumturquoise | #48d1cc | 72,209,204 | |
| mediumvioletred | #c71585 | 199,21,133 | |
| midnightblue | #191970 | 25,25,112 | |
| mintcream | #f5fffa | 245,255,250 | |
| mistyrose | #ffe4e1 | 255,228,225 | |
| moccasin | #ffe4b5 | 255,228,181 | |
| navajowhite | #ffdead | 255,222,173 | |
| navy | #000080 | 0,0,128 | |
| oldlace | #fdf5e6 | 253,245,230 | |
| olive | #808000 | 128,128,0 | |
| olivedrab | #6b8e23 | 107,142,35 | |
| orange | #ffa500 | 255,165,0 | |
| orangered | #ff4500 | 255,69,0 | |
| orchid | #da70d6 | 218,112,214 | |
| palegoldenrod | #eee8aa | 238,232,170 | |
| palegreen | #98fb98 | 152,251,152 | |
| paleturquoise | #afeeee | 175,238,238 | |
| palevioletred | #db7093 | 219,112,147 | |
| papayawhip | #ffefd5 | 255,239,213 | |
| peachpuff | #ffdab9 | 255,218,185 | |
| peru | #cd853f | 205,133,63 | |
| pink | #ffc0cb | 255,192,203 | |
| plum | #dda0dd | 221,160,221 | |
| powderblue | #b0e0e6 | 176,224,230 | |
| purple | #800080 | 128,0,128 | |
| red | #ff0000 | 255,0,0 | |
| rosybrown | #bc8f8f | 188,143,143 | |
| royalblue | #4169e1 | 65,105,225 | |
| saddlebrown | #8b4513 | 139,69,19 | |
| salmon | #fa8072 | 250,128,114 | |
| sandybrown | #f4a460 | 244,164,96 | |
| seagreen | #2e8b57 | 46,139,87 | |
| seashell | #fff5ee | 255,245,238 | |
| sienna | #a0522d | 160,82,45 | |
| silver | #c0c0c0 | 192,192,192 | |
| skyblue | #87ceeb | 135,206,235 | |
| slateblue | #6a5acd | 106,90,205 | |
| slategray | #708090 | 112,128,144 | |
| slategrey | #708090 | 112,128,144 | |
| snow | #fffafa | 255,250,250 | |
| springgreen | #00ff7f | 0,255,127 | |
| steelblue | #4682b4 | 70,130,180 | |
| tan | #d2b48c | 210,180,140 | |
| teal | #008080 | 0,128,128 | |
| thistle | #d8bfd8 | 216,191,216 | |
| tomato | #ff6347 | 255,99,71 | |
| turquoise | #40e0d0 | 64,224,208 | |
| violet | #ee82ee | 238,130,238 | |
| wheat | #f5deb3 | 245,222,179 | |
| white | #ffffff | 255,255,255 | |
| whitesmoke | #f5f5f5 | 245,245,245 | |
| yellow | #ffff00 | 255,255,0 | |
| yellowgreen | #9acd32 | 154,205,50 |
示例代码:
媒体类型(Media Types)
| 媒体类型 | 版本 | 兼容性 | 描述 |
|---|---|---|---|
| aural | CSS2不推荐使用 | Opera | 用于语音和音乐合成器 |
| braille | CSS2 | Opera | 用于触觉反馈设备 |
| handheld | CSS2 | Chrome,Safari,Opera | 用于小型或手持设备 |
| CSS2 | 所有浏览器 | 用于打印机 | |
| projection | CSS2 | Opera | 用于投影图像,如幻灯片 |
| screen | CSS2 | 所有浏览器 | 用于计算机显示器 |
| tty | CSS2 | Opera | 用于使用固定间距字符格的设备。如电传打字机和终端 |
| tv | CSS2 | Opera | 用于电视类设备 |
| embossed | CSS2 | Opera | 用于凸点字符(盲文)印刷设备 |
| speech | CSS2 | Opera | 用于语音类型 |
| all | CSS2 | 所有浏览器 | 用于所有媒体设备类型 |
CSS Hack
常用 CSS Hack
条件Hack
属性级Hack
选择符级Hack
| hack | 描述 |
|---|---|
| 条件Hack | 语法: 取值: <keywords> if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本 <version>目前的常用IE版本为6.0及以上,推荐酌情忽略低版本,把精力花在为使用高级浏览器的用户提供更好的体验上 IE10及以上版本已将条件注释特性移除,使用时需注意。 说明: 用于选择IE浏览器及IE的不同版本
|
| 属性级Hack | 语法: selector{<hack>?property:value<hack>?;} 取值: 说明: 选择不同的浏览器及版本
|
| 选择符级Hack | 语法: <hack> selector{ sRules } 说明: 选择不同的浏览器及版本
|
参考资源列表
参考资源列表
渐变色资源
动画资源
在线css3代码生成器
Bugs和解决方案
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode):
如何在IE6及更早浏览器中定义小高度的容器?
方法:
IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高
如何解决IE6及更早浏览器浮动时产生双倍边距的BUG?
方法:
当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况,设置该元素的display属性为inline即可。
如何在IE6及更早浏览器下模拟min-height效果?
方法:
注意此时#test不能再设置overflow的值为hidden,否则模拟min-height效果将失效
如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题?
方法:
如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时,li之间产生的空白间隙的BUG?
方法:
除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以
如何解决IE6及更早浏览器下的3像素BUG?
方法:
在IE6及更早浏览器下为.content设置margin-right:-3px;也可以设置.aside为浮动
如何解决IE6下的文本溢出BUG(江湖匪号:“谍影重重”或“一只猪的故事”)?
BUG重现:
运行如上代码,你会发现文字发生了溢出,在IE6下会多出一只“猪”。造成此BUG的原因可能是多重混合的,如浮动,注释,宽高定义等等。并且注释条数越多,溢出的文本也会随之增多。
列举几个解决方法:
删除box1和box2之间所有的注释;
不设置浮动;
调整box1或box2的宽度,比如将box的宽度调整为90px如何解决IE6使用滤镜PNG图片透明后,容器内链接失效的问题?
方法:
解决方法是为容器内的链接定义相对定位属性position的值为relative
如何解决IE6无法识别伪对象:first-letter/:first-line的问题?
方法1:
增加空格:在伪对象选择符:first-letter/:first-line与包含规则的花括号"{"间增加空格。
方法2:
换行:将整个花括号"{"规则区域换行。细节参见E:first-letter和E:first-line选择符
如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题?
BUG重现:
如上代码,在IE8下color定义都会失效,原因就是因为有color使用了!important规则。鉴于此,请尽量不要在:first-letter/:first-line里使用!important规则。
如何解决IE6会忽略同一条样式体内的!important规则的问题?
BUG重现:
如上代码,IE6及以下浏览器div的文本颜色为#000,!important并没有覆盖后面的规则,也就是说!important被忽略了。解决方案是将该样式拆分为2条,细节参见!important规则
如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题?
BUG重现:
如上代码,IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1
如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题?
BUG重现:
如上代码,IE6及更早浏览器div.nav会被设置了zoom:1的ul给撑开。
列举几个解决方法:
设置ul为浮动元素;
设置ul为inline元素;
设置ul的width如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题?
BUG重现:
如上代码,在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative
如何解决Chrome在应用transition时页面闪动的问题?
方法:
在Chrome下,使用过渡效果transition时有时会出现页面闪动
技巧和经验
CSS技巧和经验列表(以下实例默认运行环境都为Standard mode):
如何清除图片下方出现几像素的空白间隙?
方法1:
方法2:
除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以
方法3:
#test为img的父元素
如何让文本垂直对齐文本输入框?
方法:
如何让单行文本在容器内垂直居中?
方法:
只需设置文本的行高等于容器的高度即可
如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?
方法:
按L-V-H-A的顺序设置超链接样式即可,可速记为LoVe(喜欢)HAte(讨厌)
为什么Standard mode下IE无法设置滚动条的颜色?
方法:
将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可
如何使文本溢出边界不换行强制在一行内显示?
方法:
设置容器的宽度和white-space为nowrap即可,其效果类似<nobr>标签
如何使文本溢出边界显示为省略号?
方法(此方法Firefox5.0尚不支持):
首先需设置将文本强制在一行内显示,然后将溢出的文本通过overflow:hidden截断,并以text-overflow:ellipsis方式将截断的文本显示为省略号。
如何使连续的长字符串自动换行?
方法:
word-wrap的break-word值允许单词内换行
如何清除浮动?
方法1:
#test为浮动元素的下一个兄弟元素
方法2:
#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height
方法3:
#test为浮动元素的父元素
如何定义鼠标指针的光标形状为手型并兼容所有浏览器?
方法:
若将cursor设置为hand,将只有IE和Opera支持,且hand为非标准属性值
如何让已知高度的容器在页面中水平垂直居中?
方法:
Know More:已知高度的容器如何在页面中水平垂直居中
如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?
方法:
#test是img的祖父节点,p是img的父节点。Know More:未知尺寸的图片如何水平垂直居中
如何设置span的宽度和高度(即如何设置内联元素的宽高)?
如何给一个元素定义多个不同的css规则?
方法:
多个规则之间使用空格分开,并且只有class能同时使用多个规则,id不可以
如何让某个元素充满整个页面?
方法:
如何让某个元素距离窗口上右下左4边各10像素?
方法:
如何去掉超链接的虚线框?
方法:
IE7及更早浏览器由于不支持outline属性,需要通过js的blur()方法来实现,如<a onfocus="this.blur();"...
如何容器透明,内容不透明?
方法2:
高级浏览器直接使用rgba颜色值实现;IE浏览器在定义容器透明的同时,让子节点相对定位,也可达到效果
如何让整个页面水平居中?
方法:
定义body的text-align值为center将使得IE5.5也能实现居中
为什么容器的背景色没显示出来?为什么容器无法自适应内容高度?
方法:
通常出现这样的情况都是由于没有清除浮动而引起的,所以Debug时应第一时间想到是否有未清除浮动的地方
如何做1像素细边框的table?
方法1:
方法2:
IE7及更早浏览器不支持border-spacing属性,但是可以通过table的标签属性cellspacing来替代。
如何使页面文本行距始终保持为n倍字体大小的基调?
方法:
注意,不要给n加单位。Know More:如何使页面文本行距始终保持为n倍字体大小的基调
标准模式Standard mode和怪异模式Quirks mode下的盒模型区别?
方法:
相关资料请参阅CSS3属性box-sizing
以图换字的几种方法及优劣分析
思路1:使用text-indent的负值,将内容移出容器
该方法优点在于结构简洁,不理想的地方:1.由于使用场景不同,负缩进的值可能会不一样,不易抽象成公用样式;2.当该元素为链接时,在非IE下虚线框将变得不完整;3.如果该元素被定义为内联级或者内联块级,不同浏览器下会有较多的差异
思路2:使用display:none或visibility:hidden将内容隐藏;
该方法优点在于兼容性强并且容易抽象成公用样式,缺点在于结构较复杂
思路3:使用padding或者line-height将内容挤出容器之外;
该方法优点在于结构简洁,缺点在于:1.由于使用场景不同,padding或line-height的值可能会不一样,不易抽象成公用样式;2.要兼容IE5.5及更早浏览器还得hack
思路4:使用超小字体和文本全透明法;
该方法结构简单易用,推荐使用
为什么2个相邻div的margin只有1个生效?
方法:
本例中box1的底部margin为10px,box2的顶部margin为20px,但表现在页面上2者之间的间隔为20px,而不是预想中的10+20px=30px,结果是选择2者之间最大的那个margin,我们把这种机制称之为“外边距合并”;外边距合并不仅仅出现在相邻的元素间,父子间同样会出现。
简单列举几点注意事项:
外边距合并只出现在块级元素上;
浮动元素不会和相邻的元素产生外边距合并;
绝对定位元素不会和相邻的元素产生外边距合并;
内联块级元素间不会产生外边距合并;
根元素间不会不会产生外边距合并(如html与body间);
设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并;如何在文本框中禁用中文输入法?
方法:
ime-mode为非标准属性,写该文档时只有IE和Firefox支持
如何解决列表中list-style-image不能精准定位的问题?
方法:
如何解决伪对象:before和:after在input标签上的怪异表现的问题?
现象:
如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定义过渡和动画的问题?
现象:
其它经验
其它技巧和经验列表(以下实例默认运行环境都为Standard mode):
如何让层在flash上显示?
方法:
设置flash的wmode值为transparent或opaque
如何使用标准的方法在页面上插入flash?
方法:
至于flash的宽高可以在css里设置
如何在点文字时也选中复选框或单选框?
方法1:
该方式所有主流浏览器都支持
方法2:
该方式相比方法1更简洁,但IE6及更早浏览器不支持
IE下如何对Standard Mode与Quirks Mode进行切换?
IE6的触发(在DTD申明前加上XML申明):
IE5.5及更早浏览器版本直接以Quirks Mode解析。
所有IE版本的触发(在DTD申明前加上HTML注释):
当没有DTD声明时,所有IE版本也会进入Quirks Mode。
如何区别display:none与visibility:hidden?
方法:
如何设置IE下的iframe背景透明?
方法:

